Archived topic
Style mobile header menu and toggle colors
5 replies · Started by Tim on July 29, 2022
Viewing posts 1–6 of 6
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!
Hi there,
Try this instead:
.main-navigation button.menu-toggle {
background-color: #f4f4f7 !important;
}Let me know if this helps :)
Awesome, that worked for the button. Now how do I style the background color of the menu that drops out?
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;
}Thanks, David! Option 2 worked beautifully for my needs. 🙂
Glad to hear that!
This archived topic is closed to new replies.
