[Resolved] tablet and mobile menu settings

[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

[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 🙂

[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?

[David]

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

[Sherina]

Ok. Just provided login via the Account issue form.

Thanks!

[Tom]

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?

[Sherina]

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

[Sherina]

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

[Leo]

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

[Sherina]

Thanks Leo.

I think I got it working.

[Leo]

No problem 🙂

[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)?

[Leo]

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

[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.

[Leo]

This is the CSS this site is using:

@media (max-width: 1024px) {
    #site-navigation {
        float: none;
        text-align: center;
    }
}

[Author]

Posts