Mobile Menu Alignemnt

[Ian]

I was wondering if there is something that I am missing. Inside Customizing > Layout > Primary Nav, I have selected Navigation Alignment = Center. Yet in Chrome Inspector, when selecting a portrait mode for iPhone 6-8 & lower screen sizes, mobile menu is left aligned. In fact, I am not even sure it’s left aligned as it looks like it’s wrapped from the line with the logo. And using the Mobile Preview in Cutomizing, it indeed shows the hamburger menu to be centered align. Just not showing this in smaller smartphones or in Chrome Inspector. Any ideas?

[Leo]

Hi there,

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

You can edit the original topic and use the private URL field.

Let me know 🙂

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

[Ian]

Thanks Leo. I added the private URL.

[Leo]

Are you wanting the logo to be left-aligned and toggle to be centered aligned on mobile?

Not sure if that’s possible as the logo is quite wide and will take up more than half the space on mobile screen.

It’s possible to have both of them centered and stacked though if that works?

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

[Ian]

Hey Leo, yes, tablet and desktop will have logo left aligned and menu float right. Once mobile kicks in, I would like Logo centered and mobile menu centered in a stacked formation. The odd thing is, inside customizer, re-selecting Navigation Alignment = Center does exactly that. But it does not seem to take after being published.

[Ian]

Or is there an easy way to make the logo smaller in mobile so menu is still float right in mobile?

[Leo]

The customizer setting only applied for desktop.

If you want to stack the logo and menu toggle, try turning off the mobile header option:
https://docs.generatepress.com/article/mobile-header/

Let me know if this helps 🙂

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

[Ian]

Hey Leo,

That seems to have solved the problem. Logo and Menu are now stacked on mobile devices now.

I may not be understanding the terminology correctly. I assumed Mobile Header = Off means no hamburger menu; ie. just show desktop menu even on mobile devices. This is clearly not the case. Am I missing something?

[Leo]

I assumed Mobile Header = Off means no hamburger menu

Mobile header is just a different header layout for mobile, have you checked out this article?
https://docs.generatepress.com/article/mobile-header/

The screenshots should explain it.

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

[Ian]

Thanks for the info. I have disabled the mobile header and this has resolved the issue. Not sure I have the expertise of patience to keep troubleshooting this. Appreciate it.

[Leo]

No problem 🙂

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

[Author]

Posts