Archived topic
Where to set background colors hamburger menu button
6 replies · Started by Rene on December 22, 2021
Hi,
I made my first simple test website with generatepress and generateblocks. Nice theme to use.
I have only 1 issue.
On mobile i used the off canvas menu.
The hamburger-menu have a background-color.
Very light grey. I dont know where to set this. I want it white.
And when i click on my mobile phonoe on the hamburger menu, the background color of the hamburger menu is changing to kind of blue color.
I can't find this color in the customizer.
Any idea where i can set this?
Thnx!
Hi there,
it will require this CSS:
.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;
}that Blue marker looks like an accessibility focus ring - are you seeing that on a live device ?
Hi David,
Thnx for your answer. But it doenst do the job.
The default background is fixed with this, but not the color when i click on it.
I see this on a live device (my own samsung galaxy s21).
Maybe you can check it on your mobile phone? When you click on the hamburger... the yellow menu slides in, and then you see a strange colored box on the location of the hamburger.
The domain you can see in my screenshots i added previously.
Thnx!
On my iPhone i only see the default tap target shadow the phone generates. I have asked one of the support team who use Android to take a look.
Hi there,
Were you pertaining to the box that shows up before the panel slides in?
If so,
Can you try adding this CSS?
nav#mobile-menu-control-wrapper.toggled {
display: none;
}Hi Elvin,
This fixed the issue! Thnx a lot.
Hope you can fix this in future updates so i dont have to fix this in every site manually.
Same to the background-color of the hamburger menu. Would be fine if we can set this in the customizer instead of custom css.
Thnx!
I've forwarded it to the dev team for them to have a look if in case a better solution can be implemented. Hopefully it gets added to the next version. :)
No problem. Happy holidays! :D
