[Resolved] Incorrect main menu color when hovering over submenus for current main menu

[Steve]

I’m trying to make a simple menu with Generatepress and the Catalyst library site. I’m most of the way through the issue, but have one final issue for which I request help.

Steps to reproduce the issue with the site clone link I supplied:

1. Hover over the main menu item “Our Work”. All is well.
2. Hover over submenu “Radical Listening” under “Our Work”. All is well.
3. Click on submenu “Radical Listening”. All is well.
4. Hover over “Our Work” again. All is well.
5. Hover over submenu “Planetary Health” under “Our Work”. The issue is shown.

What is wrong is that the main menu “Our Work” reverts back to “blue on white” while you are hovering on the submenu. It should remain “white on green”.

In the Customizer, I’ve set the main menu colors to what you’d expect.
– Blue on white by default.
– White on blue when hovering.
– Blue on white when current.

In my child theme I’ve customized the CSS as follows.

.main-navigation .main-nav ul ul li[class*=”current-menu-“] > a {
background-color: #7ccd66;
color: #ffffff !important;
}

.main-navigation .main-nav ul ul li[class*=”current-menu-“] > a:hover {
background-color: #122948 !important;
color: #ffffff;
}

.main-navigation .main-nav ul li[class*=”current-menu-“] > a {
background-color: #ffffff;
color: #122948;
}

.main-navigation .main-nav ul li[class*=”current-menu-“] > a:hover {
background-color: #7ccd66 !important;
color: #ffffff;
}

/* This one appears to not be having an effect. */
.main-navigation .main-nav ul li[class*=”current-menu-“].sfHover > a {
background-color: #7ccd66 !important;
color: red !important;
}

That last CSS item was intended to fix the issue, but it has no effect.

Thanks in advance for your help. Generatepress is a great theme and well worth the price. I’ve been looking for something so well coded for a long time.

Best,

Steve

P. S. This support topic seems to be related.

https://generatepress.com/forums/topic/suggestion-set-menu-color-for-background-hover-current/

[Leo]

Hi there,

Can you try this for the parent menu link and see if this works better?
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-link

Let me know 🙂

[Steve]

Thanks for the suggestion, Leo.

The parent menu items are already made from custom links, so that doesn’t solve it.

Steve

[Leo]

Can you try adding # for the link field as suggested in the article?

Can you try removing this CSS you’ve added first?

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    background-color: #ffffff;
    color: #122948;
}

[Steve]

Hi Leo,

Thanks again.

I updated the CSS per your direction. The CSS is copied below.

I’ve replaced “Our Work” with “Our Work2” using a custom link with “#” as the link.

Now, the “Our Work2” menu item is always white on green, when it should be blue on white unless in the hover state. (The CSS I removed was forcing it to blue on white, which is the normal state.)

Note that you won’t see this in your clone version, but I’d be happy to generate another if that would help.

Best,

Steve

CSS is now:

.main-navigation .main-nav ul ul li[class*=”current-menu-“] > a {
background-color: #7ccd66;
color: #ffffff !important;
}

.main-navigation .main-nav ul ul li[class*=”current-menu-“] > a:hover {
background-color: #122948 !important;
color: #ffffff;
}

/*.main-navigation .main-nav ul li[class*=”current-menu-“] > a {
background-color: #ffffff;
color: #122948;
}
*/
.main-navigation .main-nav ul li[class*=”current-menu-“] > a:hover {
background-color: #7ccd66 !important;
color: #ffffff;
}

/* This one appears to not be having an effect. */
.main-navigation .main-nav ul li[class*=”current-menu-“].sfHover > a {
background-color: #7ccd66 !important;
color: red !important;
}

[Leo]

Note that you won’t see this in your clone version, but I’d be happy to generate another if that would help.

Definitely would help to see it.

Any chance you can temporarily comment out all the additional CSS you’ve added as well?

Thanks 🙂

[Steve]

Hi Leo,

Maybe a better way to proceed is to demonstrate the issue in the stock Catalyst site library.

I’ve installed the Catalyst library site. It only has top navigation without submenus, so I added a couple of pages under Style Guide to demonstrate the issue.

1. Go to https://radicallistening.org.
2. Hover over “Style Guide” in the navigation. You’ll see that “Style Guide” turns from white to blue. The submenu is also shown.
3. Hover over “Testing 1 2 3”. The “Style Guide” is still blue.
4. Click on “Testing 1 2 3”.
5. Hover over “Style Guide” then “Testing 1 2 3” again, and you’ll see that “Style Guide” stays white, and does not turn to blue.

It is this same behavior that is causing the issues with my site. Once you’ve selected a page from the submenu, the main menu is stuck with the “current page” colors.

If you can find a way to get “Style Guide” to be blue when you are hovering over “Testing 1 2 3” when “Testing 1 2 3” or “Testing 4 5 6” is the current page, you’ve found the solution.

Thanks again for your help,

Steve

[Leo]

Can you try this CSS:

.main-navigation .main-nav ul li.current_page_ancestor > a {
    color: #000;
    background-color: #fff;
}

[Steve]

Hi Leo,

Thanks for the suggestion.

I tried adding:

.main-navigation .main-nav ul li.current_page_ancestor > a {
color: #000;
background-color: #fff;
}

But it had no effect at all.

Would this have changed the Catalyst behavior I mentioned previously?

Steve

[Leo]

It would be like this with the code added:
https://www.screencast.com/t/IFcfdw40VdB

[Steve]

Hi Leo,

I’ve tried the CSS you suggested and it causes the current main menu item to always be white.

.main-navigation .main-nav ul li.current_page_ancestor > a {
color: #000;
background-color: #fff;
}

(Adding :hover to the a tag doesn’t work, either.)

To come back to my original issue, I’m looking to completely eliminate any changes to the look of the main menu items when one of submenu pages is “current”. Also, I want the main menu item to be highlighted with its hover styling when the cursor is hovering over a submenu.

We’re getting ready to launch our site, and here’s a password to it so I can demonstrate the problem once more.

https://healthinharmony.tech
Password: orangutan

To demonstrate the problem:
1. Hover over the main menu item “Our Work”. All is well.
2. Hover over submenu “Radical Listening” under “Our Work”. All is well.
3. Click on submenu “Radical Listening”. All is well.
4. Hover over “Our Work” again. All is well.
5. Hover over submenu “Planetary Health” under “Our Work”. The issue is shown.

What is wrong is that the main menu “Our Work” reverts back to “blue on white” while you are hovering on the submenu. It should remain “white on green”.

I’m beginning to think that this behavior is forced by the javascript, and is not controllable by the CSS. And so I think the eventual solution will be some javascript.

We’re hoping to launch this weekend, so your help is much appreciated.

Best,

Steve

[Tom]

Hi there,

You currently have this CSS:

.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover {
    background-color: #7ccd66 !important;
    color: #ffffff;
}

Can you try this instead?:

.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a,
.main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a {
    background-color: #7ccd66 !important;
    color: #ffffff;
}

[Steve]

Thank you, Tom! Works like a charm.

Your software is so awesome, and your support is, too.

Best,

Steve

[Tom]

Thank you! Glad I could help 🙂

[Author]

Posts