different active and hover colors for different main menu items

[Michael]

Michael

September 20, 2020 at 1:12 pm

I’m trying to develop a color scheme where the pages of each major menu section have a different heading background color. That’s easy enough: I’ve created css classes to color the different page headers which I enter into each appropriate block.

Where I’m struggling is that I’d like the main header menu to show the same colors for active/hover menu items at the top level, and on dropdown items for the child items. I’ve got most of it working. Here’s an example from the “Support” section:

/*Recolors dropdown menus to match color scheme: working */
.sf-dropdown.menu-item.menu-item-has-children.menu-item-48.menu-item.menu-support li {
background: #235789;
color: #FFFFFF;
}

/*Main Menu active and hover: not working*/
li.current-menu-item.current_page_item.menu-item-has-children.menu-item-48 span {
background: #235789;
color: #FFFFFF;
}

As you can see in the image, it’s almost working. The color I’m trying to match is the horizontal blue bar. The dropdown menus are behaving the way I want. But for the top level menu item, the best I’ve been able to do is change the background color for the text (span). I haven’t been able to figure out how to specify the entire red box (red is the theme-level active/hover color which I’m trying to override).

Thoughts?

Michael