- This topic has 2 replies, 2 voices, and was last updated 5 years ago by .
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The topic ‘different highlight color in header menu?’ is closed to new replies.
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!
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.
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.