Archived topic
With Mobile Header ON Hamburger Menu is disabled
16 replies · Started by stlayman on November 20, 2018
Just updated to version 2.2 and am using mobile header as "on". The mobile hamburger menu shows an X when clicked, and no menu. When I turn off the mobile header it works.
The menu expands when you start scrolling...
I had to turn off sticky navigation for the mobile menu to expand.
Hmmm... help please!
Is this happening on your site right now, or did you turn off the setting causing it? If so, can you turn it back on so I can take a look?
Thanks!
Hi Tom, I just now turned sticky navigation back ON, so you can see the mobile menu not expanding. If I start to scroll then sometimes the menu appears. Maybe it's a z-index conflict?
Ah yes, looks like a bug. I'll get this fixed in GPP 1.7.5.
For now, add this CSS:
.both-sticky-menu .main-navigation:not(#mobile-header).toggled .main-nav > ul,
.mobile-header-sticky #mobile-header.toggled .main-nav > ul,
.mobile-sticky-menu .main-navigation:not(#mobile-header).toggled .main-nav > ul {
z-index: 999;
}Perfect, works good now with sticky nav ON :) Thank you!
No problem! Thanks for reporting the bug :)
I noticed that when using the new navigation drop point, that it works great on iPhoneX landscape except when you scroll down, the nav loses its drop point centering functionality, and wraps the menu. I have the drop point set for 812. (two different nav layouts when you scroll up and down)
This is a tough one because the drop point makes the header quite tall. Keeping that tall header when sticky would likely be a disaster when it comes to UX. It would take up a good portion of a mobile screen for example.
In this case, it may be better to initiate the mobile menu at a wider width: https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width
Yes, it's a tough one only on the iPhoneX. I used your CSS at the link, and the hamburger menu appears, but everything is centered/stacked taking up just as much space. For now, I'll just decrease my menu text font and spacing.
We do plan on adding tablet font size settings for the menu very soon :)
Just put the CSS back if you want to take a look
That would be awesome!
In that case you can disable the drop point option as the mobile toggle will show up when things start to wrap :)
Ok, I did that and the hamburger menu is still centered and below the logo. I'll take another look tomorrow. Thanks a million :)
Sounds good - let me know if you keep it on and want me to take a look :)
