Archived topic
Issues with Changing Mobile Header Breakpoint when NOT Slideout Menu
10 replies · Started by Vin on December 7, 2018
Hi there,
I'm trying to change the mobile header breakpoint to as high as 1023px using the following code example:
https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043
First, it wasn't expanding the menu at all. I'm not using the slide-out-menu, so I figured I had to replace it here:
.main-navigation:not(.slideout-navigation) .main-nav > ul {
display: none;
}changing this to
.main-navigation:not(.mobile-header-navigation) .main-nav > ul {
display: none;
}Now the menu does expand, BUT it also displays it when not expanded, with the items next to each other.
You can check what I mean at the URL (only visible to admins).
So there must be something else I need to add. Any ideas?
Thank you so much.
One more note: The problematic screen width range is from 769px to 1023px, so anything above the standard breakpoint. Below the standard breakpoint everything seems to be fine.
Hi there,
Can you try using the code without changing anything?
It shouldn't matter if you are using the slideout navigation or not.
Let me know :)
Hi Leo,
I tried that before, but then the mobile menu wouldn't expand at all. I changed it back to the original code now, so you can have a look.
Thanks so much.
Kevin
And the mobile menu works fine without the code?
Correct. You can check now (removed it).
Hmm weird. Can you add the code back in so we can have another look?
Hi Leo,
just added the code back in. Now the mobile menu doesn't expand upon clicking.
Hope you can find the issue :)
Thanks,
Kevin
Hi there,
with your @media (max-width: 1023px) query you have this CSS:
.main-navigation:not(.slideout-navigation) .main-nav > ul {
display: none;
}This is hiding the drop down.
Hi David,
thanks! I removed it and it does activate the dropdown. This is similar to what I tried in my first post. But then I get the other problem again: Between 789 and 1023 px the menu items now appear even when not expanded, but next to each other.
Try using this CSS to hide the horizontal nav at that range:
.main-navigation:not(.toggled) .main-nav > ul {
display: none;
}