Archived topic
Change background color of hamburger & dropdown menu on menu
5 replies · Started by Jon on October 9, 2022
Hi - the hamburger & the related dropdown menu on my site has a light grey background color which I would like to change to white to match the rest of the site. I can't find the settings for them under Colors in Customizer and neither can I work out the right CSS selectors.
Could you explain how I change it please?
Hi there,
try this CSS:
.has-inline-mobile-toggle #site-navigation.toggled {
background-color: #fff;
}
Hi David - thanks. That works for the mobile dropdown menu (see live site), but not for the hamburger background. I think I've worked it out with this:
/* change background color on hamburger and menu dropdown on mobile */
.has-inline-mobile-toggle #site-navigation.toggled {
background-color: #fff;
}
.mobile-menu-control-wrapper .menu-toggle, .mobile-menu-control-wrapper .menu-toggle:hover, .mobile-menu-control-wrapper .menu-toggle:focus, .has-inline-mobile-toggle #site-navigation.toggled {
background-color: #fff;
}
Does that look right to you?
Hi John,
It's working. Here is what it looks like from my end: https://share.getcloudapp.com/9ZugzjX1
Great, thank you.
You're welcome Jon!