[Support request] Style mobile header menu and toggle colors

[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!

[Leo]

Hi there,

Try this instead:

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

Let me know if this helps 🙂

[Tim]

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

[David]

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

[Tim]

Thanks, David! Option 2 worked beautifully for my needs. 🙂

[David]

Glad to hear that!

[Author]

Posts