Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support Change color of ONE of the items in the menu?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #145608
    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

    #145670
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #145938
    Lisa Lidgren

    Thank you so much! It worked perfectly!

    #145940
    Tom
    Lead Developer
    Lead Developer
    #225694
    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

    #225837
    Tom
    Lead Developer
    Lead Developer

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.