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

Home Forums Support Incorrect main menu color when hovering over submenus for current main menu

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #960410
    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/

    #960503
    Leo
    Staff
    Customer Support

    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 🙂

    #960511
    Steve

    Thanks for the suggestion, Leo.

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

    Steve

    #960515
    Leo
    Staff
    Customer Support

    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;
    }
    #960540
    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;
    }

    #960675
    Leo
    Staff
    Customer Support

    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 🙂

    #960988
    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

    #961265
    Leo
    Staff
    Customer Support

    Can you try this CSS:

    .main-navigation .main-nav ul li.current_page_ancestor > a {
        color: #000;
        background-color: #fff;
    }
    #961394
    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

    #961423
    Leo
    Staff
    Customer Support
    #966846
    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

    #967162
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #967303
    Steve

    Thank you, Tom! Works like a charm.

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

    Best,

    Steve

    #967506
    Tom
    Lead Developer
    Lead Developer

    Thank you! Glad I could help 🙂

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.