[Resolved] Mobile menu breaks on smaller screens

[Vera]

Hello!
I noticed that on some mobile screens (iPhone 7 in particular, but perhaps on all screens of that size or smaller), my menu (hamburger icon and the word Menu) doesn’t stay aligned to the right of the logo (as I have set it to be, and it is on larger phone and desktop screens). Instead, it moves to the left below the logo.
How can I make it fit all screen sizes in the same way (to shrink the entire header, so the logo always stays on the left, and the hamburger menu on the right). Maybe the solution can be to remove the word Menu and only keep the hamburger icon, but I don’t know how to achieve that either.
Thanks for your help and happy New year!
vera

[Ying]

Hi Vera,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Vera]

Yes, Ying! Thanks!

[David]

Hi there,

if you go to Customizer > Layout > Primary Navigation and simply remove ‘menu’ from the Mobile Menu Label field. This will just display the hamburger icon

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Vera]

Hi David,
yes this solved the issue, at least on iphone 7. But I guess majority of screens are that size or bigger. So it should be enough. Thanks!
vera

[David]

You’re welcome!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Hello David or whoever of the team is listening,

I have the same problem right now but the label is already out. On iPhone SE (quite small) the hamburger is breaking. How can I solve that for screens of any size? I would like the logo to shrink if the screen gets to small.

[Leo]

Hi David,

Can you open a new topic and link us to the page in question?

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts