[Resolved] Prim Navigation Sub-Menu Background and Text Hover Colour Change Not Working

[MMS]

Trying to change the Primary Navigation Sub-Menu Background and Text Hover Colours Doesn’t work. Changing these colours does nothing – No change to the hover conditions on the site menu drop down sub-menu?

[MMS]

[David]

Hi there,

can i see the site ? I can then check whats overriding the customizer settings.

[MMS]

Hi, Login details provided below. FYI the rollover preference is for mouse-over colour to change on on drop down sub-menus to Background = Lt Green #5e9829 With White Text. Thanks

[Elvin]

Hi Simon,

Do you want it to behave like this?

If so, add this CSS:

.main-nav > ul li ul.sub-menu li.menu-item:hover > a {
    background-color: #5e9829;
    color: white;
}

[MMS]

Perfect. Thank you.

[Elvin]

No problem. 😀

[MMS]

Hi, I’ve just noticed that although the CSS code supplied above works on the home page, on individual post pages when you mouse over the top level menu item the resulting drop-down sub-menu item already has the green (rollover state) background applied (i.e. not the grey background as seen if you do the same thing on the home page). Is there a way to fix this?

[David]

Hi there,

you shouldn’t require the CSS.
In Customizer > Colors > Primary –> Sub Menus need to be set correctly.
The issue are facing is the Current Color is displayed when your on the current page… your first submenu item Gardening is the Home page, so it will display the current color.

So questions:

1. What color should the Current Page menu item be?
2. Do you still want to apply a hover color when hovering over a current menu item?

[MMS]

Hi, I’ve managed to resolve thanks it was a problem with adding the site home URL as a placeholder whilst building the menu.

[David]

Glad to hear that!

[Author]

Posts