[Support request] Style mobile header menu and toggle colors

Home Forums Support [Support request] Style mobile header menu and toggle colors

Home Forums Support Style mobile header menu and toggle colors

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2297690
    Tim

    Hello,

    I want to change the colors of the mobile menu toggle button, the background of the menu list, and the toggle button when the menu is open (when showing “x”).

    I added this code:

    .main-navigation button.menu-toggle {
        background-color: #f4f4f7;
    }

    It changed the color of the toggle button, but it reverts to the default when the menu is open.

    My site:
    https://www.nesteaglerock.com

    Thank you!

    #2297730
    Leo
    Staff
    Customer Support

    Hi there,

    Try this instead:

    .main-navigation button.menu-toggle {
        background-color: #f4f4f7 !important;
    }

    Let me know if this helps ๐Ÿ™‚

    #2297740
    Tim

    Awesome, that worked for the button. Now how do I style the background color of the menu that drops out?

    #2297944
    David
    Staff
    Customer Support

    Hi there,

    if its a different color to the toggle then do this:

    .has-inline-mobile-toggle.site-header #site-navigation.toggled {
        background-color:  #f00;
    }

    If its the same color then update the CSS Leo provided with:

    
    .main-navigation button.menu-toggle,
    .has-inline-mobile-toggle.site-header #site-navigation.toggled {
        background-color: #f4f4f7 !important;
    }
    #2298019
    Tim

    Thanks, David! Option 2 worked beautifully for my needs. ๐Ÿ™‚

    #2298026
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.