[Resolved] Mobile Menu Alignemnt

Home Forums Support Mobile Menu Alignemnt

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1054179
    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?

    #1054180
    Leo
    Staff
    Customer Support

    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 🙂

    #1054204
    Ian

    Thanks Leo. I added the private URL.

    #1054231
    Leo
    Staff
    Customer Support

    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?

    #1054235
    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.

    #1054236
    Ian

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

    #1054237
    Leo
    Staff
    Customer Support

    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 🙂

    #1054428
    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?

    #1054445
    Leo
    Staff
    Customer Support

    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.

    #1054484
    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.

    #1055070
    Leo
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.