[Resolved] tablet and mobile menu settings

Home Forums Support [Resolved] tablet and mobile menu settings

Home Forums Support tablet and mobile menu settings

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #652873
    Sherina

    Hello, I am having a trouble trying to configure my navigation menu for mobile devices. I have searched the forums and found bits and pieces, but still can’t achieve the look I’m going for.

    To start I have used this tutorial to center my logo in the nav menu. That works perfectly.

    Now, I’m trying to get my mobile logo and nav to pretty much have the same settings as the GeneratePress site. For tablet view I would like to have the same centered logo as the desktop, then switch to logo centered on top and menu beneath for smaller/vertical tablets, then switch to icon size logo and menu toggle for smaller mobile views.

    Hope this is making sense.

    Thanks

    GeneratePress 2.1.3
    GP Premium 1.7.1
    #653114
    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 ๐Ÿ™‚

    #653344
    Sherina

    Hi Leo

    I just sent the url but I currently have the site offline mode active as I am working on building the site. Would you need my wp login?

    #653560
    David
    Staff
    Customer Support

    Hi there, if you can remove the coming soon or provide login via the Account issue form here:

    https://generatepress.com/contact/

    Please add the URL of this topic to the contact form

    #653569
    Sherina

    Ok. Just provided login via the Account issue form.

    Thanks!

    #653802
    Tom
    Lead Developer
    Lead Developer

    You have quite a few menu items, so I’m not sure how we’d keep your menu centered on smaller screens.

    We could reduce the width of the logo maybe?

    #653838
    Sherina

    Yes, I have a smaller logo that I can use for smaller screens. When I upload it though, it is really tiny.

    #653844
    Sherina

    I can’t seem to increase the size of my mobile logo, without also increasing the menu item space.

    #653860
    Leo
    Staff
    Customer Support

    First you have some Elementor spacer in there that you might want to remove:
    https://www.screencast.com/t/YPsyAtXClEBB

    Then you can follow the steps here to set mobile header height different than the menu item height:
    https://generatepress.com/forums/topic/menu-item-width/#post-596935

    #654489
    Sherina

    Thanks Leo.

    I think I got it working.

    #654565
    Leo
    Staff
    Customer Support
    #658029
    Sherina

    Hello, another question…still working on my mobile menu settings.

    I’m testing my mobile menu using the breakpoint of my iPad in portrait view. I have the logo centered like I want it, but instead of the mobile hamburger menu, I would like the full desktop menu to center under the logo, at the set width.

    So how do I remove the hamburger menu for this particular breakpoint – @media (min-width: 769px) and (max-width: 1200px)?

    #658381
    Leo
    Staff
    Customer Support

    So just to confirm, you would like to increase the breakpoint where the mobile menu shows up?

    #658408
    Sherina

    No, not just increase the breakpoint, I don’t think… At a certain breakpoint, instead of the menu falling below the header left aligned, I would like it to center align, along with the logo. Just like the header on the generate press website.

    #658521
    Leo
    Staff
    Customer Support

    This is the CSS this site is using:

    @media (max-width: 1024px) {
        #site-navigation {
            float: none;
            text-align: center;
        }
    }
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.