[Resolved] Change Mobile Menu Hamburger Icon Background Colour on Hover

Home Forums Support [Resolved] Change Mobile Menu Hamburger Icon Background Colour on Hover

Home Forums Support Change Mobile Menu Hamburger Icon Background Colour on Hover

  • This topic has 14 replies, 3 voices, and was last updated 2 months ago by Ying.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #2005837
    Brent Wilson

    What CSS do I need to make the background behind the mobile menu hamburger icon change colour on hover?

    #2005853
    Elvin
    Staff
    Customer Support

    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)

    A wise man once said:
    "Have you cleared your cache?"

    #2007108
    Brent Wilson

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

    #2007174
    Ying
    Staff
    Customer Support

    Hi Brent,

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

    Can you give it a try?

    Let me know πŸ™‚

    #2007314
    Brent Wilson

    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?

    #2007339
    Elvin
    Staff
    Customer Support

    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. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #2008188
    Brent Wilson

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

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

    #2008197
    Brent Wilson

    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;
        }
    }
    #2008351
    Ying
    Staff
    Customer Support

    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.

    #2008371
    Brent Wilson

    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?

    #2008417
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #2008463
    Brent Wilson

    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?

    #2008480
    Ying
    Staff
    Customer Support

    It should be helpful with standard layout without merged header. But I will definitely mention this to Tom πŸ™‚

    #2008494
    Brent Wilson

    Sounds good! Thanks for your help on this issue!

    #2008527
    Ying
    Staff
    Customer Support

    You are welcome πŸ™‚

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