Wordpress Themes - WP Forum at BFA - Different Colors in menu

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)

- - Different Colors in menu (http://forum.bytesforall.com/showthread.php?t=20656)

Different Colors in menu

Hi,

I want to create (copy) this color menu: http://rightone.nl/ in 5 colors, I only care about the colors not the design or size of the menu, so just the default ATA menu but then with 5 different collors, the submenu has to be in the same color as the main menu, is this possible?

Thx a lot in advance!

Sure, you just need to create a CSS selector for each menu using a unique identifier for each menu item.

It's firebug time!

I am very bad with CSS do you have an example? If this take you (extra) work I can donate ;)

You can add your own special classes to the menu tabs in Appearance>Menus but giving you specifics is difficult as it depends on your implementation of the menu. To style like you want requires you use a code inspector like Firebug to determine the CSS. Giving you sample code could make things more confusing.

Here is some sample menu code taken from a home page

HTML Code:

menu2" class="clearfix rMenu-hor rMenu">

        <li class="page_item page-item-2 current_page_item">

                <a href="http://mydomain.com/"><span>Home</span></a>

        </li>

        <li class="page_item page-item-7">

                <a href="http://mydomain.com/business-support/"><span>Business Support</span></a>

        </li>

        <li class="page_item page-item-9">

                <a href="http://mydomain.com/tax-legal-advisory/"><span>Tax & legal advisory</span></a>

        </li>

        <li class="page_item page-item-11">

                <a href="http://mydomain.com/business-coaching/"><span>Business coaching</span></a>

        </li>

        <li class="page_item page-item-13">

                <a href="http://mydomain.com/education/"><span>Education</span></a>

        </li>

</ul></div>

Notice each <li> has a unique class like 'page-item-2' and 'page-item-11' You can use this to address each menu item separately.
here is an example to address the 'Business Support' menu item - add this to the CSS Inserts

HTML Code:

div#menu1 ul.rMenu li.page-item-7 a, 

div#menu1 ul.rMenu li.page-item-7 a:link, 

div#menu1 ul.rMenu li.page-item-7 a:active, 

div#menu1 ul.rMenu li.page-item-7 a:hover, 

div#menu1 ul.rMenu li.page-item-7 a:visited

{ background-color: #00ffff; }

now just duplicate this for the rest of the menu items. If you want the hover to be different, you need to split that css selector out from the rest.

This works like a charm, Thx a lot!! :) :)

Donation is done! :) thx again