Archived topic
Hamburger Background Colour
5 replies · Started by Ian on April 2, 2021
I noticed Cusomizer > Colours > Primary Nav > Background can control the hamburger menu BG colour. Right now, it's set to #ffffff but it shows up as slightly grey. I can see there is a slight different between this #ffffff and the Header BG Colour of #ffffff. Any ideas? Link shared.
Hi Ian,
Yes, the semi-transparent grey background color is from the theme.
Add this CSS to change it to completely transprent:
.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: transparent;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Thank you Ying!
1. I have never had to do this on previous GPP installs. Is this something new?
2. Can this colour not be controlled within the Customizer?
I am wondering if I need to be aware of this for other sites as I roll them out using GPP.
Thanks,
Ian
Hi there,
in GP 3.0 we introduced a default inline mobile menu ( previously they were stacked ) and that item has its own styles.
Using the Mobile Header or the Navigation as Header option will remove that styling.
So I went ahead and enabled mobile header. After adjusting Primary Nav Menu Item height to control mobile logo size, off canvas items have too much spacing. Is there some css to control mobile logo size so we don't have to use Primary Nav menu item height?
Doh! Nevermind. I adjusted menu item height in Off Canvas layout to fix the issue above. Is this the correct approach?
Adjusting primary navigation menu item height on mobile should not affect off-canvas menu item height.
Could you let me know what's your settings? I'll try to replicate the problem.
Let me know :)
