[Support request] Tablet menu does not show hamburger on live site but shows in "Appearance" edito

[David Victor]

In tablet mode in the Appearance -> Layout -> Primary Navigation correctly shows the hamburger menu, but on the live site, it still shows the desktop menu, which looks messy:

Thanks for your help!

[David]

Hi there,

the tablet mode relates to portrait view only, as Landscape is more akin to that of a desktop resolution. This article explains how to change the breakpoint of the mobile navigation so it kicks in on larger screens but this will apply to desktop views of that size as well:

https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

[David Victor]

Yes, I am using it all in portrait mode. So the tablet is showing the full menu in portrait mode, even though when in the Appearance editor, it shows it (also in portrait mode) correctly with the hamburger…

[David Victor]

I’m sorry, the wrong URL was posted…it should be:

https://davidvictorpresents.com

Thank you!

[Tom]

Hi there,

It depends on the resolution of the device you’re using.

The mobile menu kicks in at 768px, which is most portrait devices.

You can increase this using the method David linked to: https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

[David Victor]

Thank you Tom! How can I make the mobile menu appear in the top right as it does on the smartphone width vs. appearing a line down on the other mobile sizes? Try widening and narrowing to see what I mean…thanks!

[David Victor]

Also seeing that when the menu is mobile, the word “Menu” next to it is underlined. How do I get rid of that?

[David]

Hi there,

include this CSS within the media query you added for changing the menu breakpoint ie. just before the last curly }

button.menu-toggle {
    width: auto;
    float: right;
}

I am not seeing the MENU underlined?

[Author]

Posts