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

Active class for menu WordPress

  • SOLVED

Hello, I have different hover states for my menu, a different hover color for each menu item/page.

This is done in my css using the class:

#menu-item-1008 a:hover {
color:#49d284 !important;
}

I would like to add the same color as an active class, I added the following class just below in the style sheet but it is not working.

#menu-item-1008 a:active {
color:#49d284 !important;
}

Could anyone help me with the correct code to add this active class.

Url for site in image.

2014-03-13 by Ross Gosling

Answers (3)

2014-03-13

zebra webdesigns answers:

Hello Ross
Please use the following CSS


#menu-item-1008.active a{
color:#49d284 !important;
}

zebra webdesigns comments:

You need to add the .active along with the particular menu id without any space

the more optimized representation will be like below


#menu-item-1008 a:hover ,#menu-item-1008.active a{
color:#49d284 !important;
}
.menu-item-865 a:hover,.menu-item-865.active a{
color: #FF5F5F !important;
}
.menu-item-866 a:hover,.menu-item-866.active a{
color: #50AAE1 !important;
}
.menu-item-867 a:hover,.menu-item-867.active a{
color: #F1BB44 !important;
}
#menu-item-868 a:hover,#menu-item-868.active a{
color: #000000 !important;
}

2014-03-13

Dbranes answers:

You could try:

#menu-nav .active a {

color:#49d284 !important;

}

ps: this will add the same color to all.

But it looks like you want different color for each menu item.

You could use what @zebra-webdesigns suggests. But there's another way that's indepented of any menu numbers.

<strong>Custom menu classes:</strong>

You can add custom menu classes to each menu item, to specify your menu active colors.

See the attached screenshot.

If you add for example the menu class: <em>menu_work</em> then
you can use

#menu-nav .menu_work.active a{

color:#49d284 !important;

}

And similar for the other menu items.

So if you delete a menu item and add it again, you don't have to rewrite your CSS code, using this method.

2014-03-13

Sai kumar answers:

Hi,

Please try with this code


#menu-item-1008.current-menu-item a{
color:#49d284 !important;
}


Hope that it will help you.

Thanks
Sai