Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Help on Menu CSS WordPress

  • SOLVED

Hello, I require some help on my Magento store, however I believe the edit is only CSS, so I thought I would ask here as i'm sure someone can help.

Currently my menu (see attached image) has a purple hover color. I would like to add a different color for each category in the menu (10 different categories/colors)

I've been told I can do this by adding different classes to the stylesheet?

When I view page source I can see each category in the navigation is given its own css class, but I am having trouble adding this class to the stylesheet.

for example:
<li class="level0 nav-1 level-top first parent">
<li class="level0 nav-2 level-top parent">

Could someone help me?

Thank You

Answers (6)

2012-09-04

Michael Caputo answers:

Your CSS should look something like this:

li.nav-1.level-top a:hover{color:#FFF;background:blue;}
li.nav-2.level-top a:hover{color:#FFF;background:blue;}
li.nav-3.level-top a:hover{color:#FFF;background:blue;}
li.nav-4.level-top a:hover{color:#FFF;background:blue;}


you'd need to change the font color and background color depending on what you want.


jimspankling comments:

Thank you!

This worked

#nav li.nav-1.level-top a:hover{color:#FFF;background:#00aeef;}
#nav li.nav-2.level-top a:hover{color:#FFF;background:#60408d;}
#nav li.nav-3.level-top a:hover{color:#FFF;background:#9dc23b;}
#nav li.nav-4.level-top a:hover{color:#FFF;background:#fab386;}
#nav li.nav-5.level-top a:hover{color:#FFF;background:#ec008c;}
#nav li.nav-6.level-top a:hover{color:#FFF;background:#25408f;}
#nav li.nav-7.level-top a:hover{color:#FFF;background:#a3238e;}
#nav li.nav-8.level-top a:hover{color:#FFF;background:#f17db1;}
#nav li.nav-9.level-top a:hover{color:#FFF;background:#f2bd0b;}
#nav li.nav-10.level-top a:hover{color:#FFF;background:#fff200;}

Would you mind telling me what the active class would be also!

Many Thanks


Michael Caputo comments:

Sure, try this:


#nav li.nav-1.level-top.current_page_item a{color:#FFF;background:#00aeef;}
#nav li.nav-2.level-top.current_page_item a{color:#FFF;background:#60408d;}
#nav li.nav-3.level-top.current_page_item a{color:#FFF;background:#9dc23b;}
#nav li.nav-4.level-top.current_page_item a{color:#FFF;background:#fab386;}
#nav li.nav-5.level-top.current_page_item a{color:#FFF;background:#ec008c;}
#nav li.nav-6.level-top.current_page_item a{color:#FFF;background:#25408f;}
#nav li.nav-7.level-top.current_page_item a{color:#FFF;background:#a3238e;}
#nav li.nav-8.level-top.current_page_item a{color:#FFF;background:#f17db1;}
#nav li.nav-9.level-top.current_page_item a{color:#FFF;background:#f2bd0b;}
#nav li.nav-10.level-top.current_page_item a{color:#FFF;background:#fff200;}

2012-09-04

Jatin Soni answers:

give me your site url and will send you css for that


Jatin Soni comments:

You also can write yourself if you are familiar

you can define color for each menu item by defining with menu item number class

for example if your bathroom menu item has number 10 than use

li.menu-item-10 > a{
background:#aa0000;
}

or
li.menu-item-10 > a{
background:#aa0000 !important; /* with important if above cant override */
}


Still if you cant do just give me url and will do it for you

Now how you can identify your menu item???

For that open firebug and check your menu element and if you will check <li> with should have multiple classes assigned there you can find menu-item-10 or so. Usually at the end.


Jatin Soni comments:

Sorry to mentioned one more thing

You also can check menu item number from Appearance > Menu

Now expand your category menu item and take your mouse on Remove or Cancel link and you will see menu item number at the left below of your browser

2012-09-04

Luis Abarca answers:

For this elements

<li class="level0 nav-1 level-top first parent">
<li class="level0 nav-2 level-top parent">


You should add this styles in your css file

.nav-1 {
/* your styles */
background-color: red;
}

.nav-2 {
/* your styles */
}

2012-09-04

harry hor answers:

Please add below css on style sheet & change the color which you want.

li.nav-1 a:hover{color:#FFF;background:#650765;}

li.nav-2 a:hover{color:#FFF;background:#650765;}

li.nav-3 a:hover{color:#FFF;background:#650765;}

li.nav-4 a:hover{color:#FFF;background:#650765;}

<strong>Html</strong>

<li class="level0 nav-1 level-top first parent">
<li class="level0 nav-2 level-top parent">
<li class="level0 nav-3 level-top parent">
<li class="level0 nav-4 level-top parent">
<li class="level0 nav-5 level-top parent">
<li class="level0 nav-6 level-top parent">

2012-09-04

Arnav Joy answers:

can you show me the url , so that i can be more specific

but you can try it


li.nav-1:hover{background:blue;}

li.nav-2:hover{background:red;}

li.nav-3:hover{background:grey;}

li.nav-4:hover{background:white;}

and so on....

2012-09-05

idt answers:

Depending in where you added the CSS (bottom or top of CSS) you may need to add !important to the style to override the existing color being used. Also, it would really help if we have the URL of your site so we can see how your CSS was done and so we can give you the exact code. Anyway, your new CSS should be something like this:

li.nav-1 a:hover{background-color: #FF0000 !important;}
li.nav-2 a:hover{background-color: #00FF00 !important;}
li.nav-3 a:hover{background-color: #0000FF !important;}
li.nav-4 a:hover{background-color: #FFFF00 !important;}
li.nav-5 a:hover{background-color: #00FFFF !important;}

and so on up top nav-10.