Home Forums Exoplanet different highlight color in header menu?

Tagged: , ,

This topic contains 2 replies, has 2 voices, and was last updated by  AbbyDazzled 2 months, 1 week ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1715

    AbbyDazzled
    Participant

    First, apologies if this has been asked/answered. I looked and didn’t see it.

    I would like to have one highlight color for the “hover” in the header menu, but a different color as the general highlight for the rest of the site. Is there a way to do that? I would imagine there is CSS for this, but not sure how to go about it.

    Thanks in advance for any help!

    #1716

    Andy
    Keymaster

    Hi, for the header menu hover color, add this in Customize > Additional CSS (changing the default color #b50b52 to your color choice)

    .main-navigation a:hover,
    .main-navigation .current_page_item > a,
    .main-navigation .current-menu-item > a,
    .main-navigation .current_page_ancestor > a {
        color: #b50b52;
    }
    
    .menu > ul > li > a:hover:before,
    .menu > ul > li.current_page_item > a:before,
    .menu > ul > li.current-menu-item > a:before {
        background: #b50b52;
    }

    The ‘color’ variable is for the hover (and active/current page) text color, whereas the ‘background’ is the color of the block line above the menu items.

    #1717

    AbbyDazzled
    Participant

    thank you so much! That was exactly what I was looking for! I needed a lighter highlight color in the menu than on the rest of the page because the lighter color was too light to be seen against a white background.  Thanks again! I love this theme – my site looks really good thanks to it.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.