Archived topic

tablet and mobile menu settings

14 replies · Started by Sherina on August 18, 2018

Viewing posts 1–15 of 15

August 18, 2018 at 10:24 am #652873

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

August 18, 2018 at 6:45 pm #653114

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 :)

August 19, 2018 at 5:20 am #653344

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?

August 19, 2018 at 8:38 am #653560

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

August 19, 2018 at 8:46 am #653569

Ok. Just provided login via the Account issue form.

Thanks!

August 19, 2018 at 4:26 pm #653802

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?

August 19, 2018 at 6:08 pm #653838

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

August 19, 2018 at 6:15 pm #653844

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

August 19, 2018 at 7:00 pm #653860

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

August 20, 2018 at 8:31 am #654489

Thanks Leo.

I think I got it working.

August 20, 2018 at 9:22 am #654565

No problem :)

August 23, 2018 at 9:01 am #658029

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

August 23, 2018 at 3:30 pm #658381

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

August 23, 2018 at 4:30 pm #658408

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.

August 23, 2018 at 8:28 pm #658521

This is the CSS this site is using:

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

This archived topic is closed to new replies.

Start building better websites today.