[Resolved] Change background color of hamburger & dropdown menu on menu

[Jon]

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?

[David]

Hi there,

try this CSS:

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

[Jon]

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?

[Fernando]

Hi John,

It’s working. Here is what it looks like from my end: https://share.getcloudapp.com/9ZugzjX1

[Jon]

Great, thank you.

[Fernando]

You’re welcome Jon!

[Author]

Posts