Help on Menu CSS WordPress

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

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 */
}


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">

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....

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.