different highlight color in header menu?

[AbbyDazzled]

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!

[Andy]

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.

[AbbyDazzled]

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.

[Author]

Posts