Archived topic
Initiating the mobile navigation at a different width
9 replies · Started by anabella on June 5, 2021
I am changing the default 768px mobile menu breakpoint.
This is because my menu has many items, and it didn't look good on tablet (landscape): the menu items were displayed in multiple lines, so I prefer to have a hamburger menu on landscape tablet (and on any screen smaller than that). So, I went to Customizer > Layout > Primary Navigation > Mobile Menu Breakpoint: I put 1024px
The problem: now, on tablet (landscape) both menus are displayed: hamnburger + full menu.
Is this the expected behavior? I know I can hide it using custom CSS but I thought the menu would adjust automatically
Thank you.
Hi there,
The mobile menu breakpoint is the correct option to use.
Maybe try something like 900px instead of 1024px?
The best solution would be to fine tweak that so it works for your need.
The code itself has no idea what device is being viewed at as it's all based on the screen width.
Let me know if this helps :)
Thanks Leo.
Unfortunately this is not what I need.
The problem I'm having is on tablet, for landscape orientation.
If I'm not mistaken, tablet on landscape orientation is 1024px, so if I set the breakpoint at 900px it won't take effect.
I need the hamburger menu to display on landscape orientation for tablet (but I need to make sure that the menu doesn't display twice like it's doing at the moment)
Ahh I see what you mean.
Thought we fixed this issue already.
What version of GP Premium plugin are you using?
The theme is updated to the latest version.
And I'm using version 2.0.2 of GP Premium plugin
Strange. Any chance you can disable all plugins except GP Premium just to make sure there are no conflicts?
Thanks Leo. Apparently this code is causing the issue: https://generatepress.com/forums/topic/center-align-elements-inside-the-main-navigation/
This is something I added to my CSS. Any way of keeping that code without generating a double menu?
Hmm do you actually need that CSS there?
I just tried removing it and don't see any differences.
Thank you so much for your help Leo!
You are right: apparently that CSS wasn't doing anything anymore. I commented it out and the problem is fixed :)
No problem :)
