[Resolved] Change color of ONE of the items in the menu?

[Lisa Lidgren]

Hello!

I would like to change the color of one of the items in the menu. Maybe it sounds strange but I want one of the item in the menu to “stand out” from the others. I have managed to change the color, but not the hover and active. Is there some amazing trick to make it happen?

Thank you in advance.
Lisa

[Tom]

First you would add a custom CSS class to your menu item in “Appearance > Menus” (I assume you already did this?).

Then you could do something like this:

.main-navigation .main-nav ul li.my-custom-class a {
    /* CSS for regular state */
}

.main-navigation .main-nav ul .my-custom-class.current-menu-item > a, 
.main-navigation .main-nav ul .my-custom-class.current-menu-parent > a, 
.main-navigation .main-nav ul .my-custom-class.current-menu-ancestor > a {
    /* CSS for current state */
}

.main-navigation .main-nav ul li.my-custom-class > a:hover, 
.main-navigation .main-nav ul li.my-custom-class.sfHover > a {
    /* CSS for hover state */
}

Hope this helps 🙂

[Lisa Lidgren]

Thank you so much! It worked perfectly!

[Tom]

You’re very welcome 🙂

[Leon]

Hi Tom,

It’s still difficult for me to do it. But thank you anyway.

It would be great if there is a option to select menu item color in future theme update. 🙂

Best
Leon

[Tom]

Colors does allow you to change all of the menu items colors, but not individual ones. Unfortunately the only way is to give them individual classes and then target them with a little CSS.

[Author]

Posts