Change Mobile Menu Hamburger Icon Background Colour on Hover

Hi Brent,

On Appearance > Customize > Colors, you should see this option under Primary navigation - https://share.getcloudapp.com/jkuEOOnL

The middle option on the 3 circles is for the background color on hover but this will apply on both mobile and desktop.

If you only want to apply it on mobile, you'll have to use custom CSS:

Example:

@media (max-width:768px){
.mobile-menu-control-wrapper .menu-toggle:hover {
    background-color: orange;
}
}

But I think this style may be moot because there's no "hover" on mobile devices as there's no cursor/pointer on its UI. (only initial state and tap)

Okay, so would there be some css I could use to get it to go orange on tap for mobile?

Hi Brent,

The CSS Elvin provided should work on tap for mobile as well.

Can you give it a try?

Let me know :)

Okay. Also, where do I set the color for the mobile dropdown menu background? Now, on desktop view I have a white background that goes to yellowish orange on hover. But at widths where the hamburger icon shows, when I click on the hamburger, the dropdown menu seems to basically have a transparent background. When I hover over the options, then I get the correct hover background. But how do I get it to show a white background behind the menu text when not hovering?

You can play around with this CSS:

@media (max-width:768px){
    /* hamburger button colors */
    html.mobile-menu-open button.menu-toggle {
        background-color: orange !important;
    }

    /* menu container colors */
    nav#site-navigation {
        background-color: white !important;
    }

    /* menu item base color */
    nav#site-navigation div#primary-menu ul li {
        background-color: white;
    }

    /* menu item on hover color */
    nav#site-navigation div#primary-menu ul li:hover,
    nav#site-navigation div#primary-menu ul li:focus {
        background-color: orange;
    }

}

I've labeled the selectors so you know which one is doing what. :)

Can you watch this Loom video I recorded and give me your feedback regarding this? Thanks!

https://www.loom.com/share/db82f77bd4c64ef9924bc17c37c9a413

Also, either or both of these bits of CSS seem to accomplish what I want. What is the difference between them? Can I just use one of them? Or do I need both? If only one, which one should I use?

@media (max-width:900px){

    /* menu container colors */
    nav#site-navigation {
        background-color: white !important;
    }

    /* menu item base color */
    nav#site-navigation div#primary-menu ul li {
        background-color: white;
    }
}

Hi Brent,

You have this CSS on your site which makes the background of primary navigation transparent, it seems a cache file, but I could be wrong.
https://www.screencast.com/t/3FTgXZbG

Could you try clear all cache including server cache and keep all cache plugins deactivated so we can see how the CSS gets there.

Let me know :)

For the CSS question, you can use either of them.

Okay, caching should be cleared and turned off now. That bit of CSS still seems to be there. Is that not put there by some setting somewhere in the customizer?

When site header and primary navigation have the same background color, it will trigger the theme to add a semi transparent color to the primary navigation.

Can you go to customizer > colors try set the background color for headerto any other color instead of var(--white)?

Let me know :)

Okay, I changed the header background color, and it seems to have fixed the issue. Is this a bug, or is it designed to be helpful with a standard header that isn't merged with content?

It should be helpful with standard layout without merged header. But I will definitely mention this to Tom :)

Sounds good! Thanks for your help on this issue!

You are welcome :)