[Resolved] Align mobile menu items

[Shawn]

Hi,
I want the nav menu items to be aligned in the middle of the screen on mobile (especially on a phone). I’d like X MENU to be centered and the individual page names flush left to it.

[Shawn]

The url isn’t showing despite clicking on link. If you view the site on a phone, you’ll see what I’m referring to.

Thanks.

[Leo]

Hi there,

If I understand this correctly, it might be easier to use the site header on mobile.

Can you try replacing this CSS:

.site-header {
    display: none;
}

with this:

@media (min-width: 769px) {
    .site-header {
        display: none;
    }
}

[Shawn]

Hi Leo,

The code you suggested doesn’t fix the alignment–I cleared browser cache on Chrome & Firefox but it appears the same as before.

Regards,
Shawn

[Leo]

That was only the first step.

Next can you upload the logo through Site Identity?
https://docs.generatepress.com/article/adding-header-logo/

Then I’ll have another look.

Let me know 🙂

[Shawn]

I can but now I have two logos, as one was added about a month ago using instructions I received from GP tech support. The logo I added via Site Identity doesn’t center on mobile, which I want it to do.

[Leo]

The logo added in Site Identity should be center by default and looks like it is.

Add this CSS to hide the navigation logo on mobile:

@media (max-width: 768px) {
    .site-logo.navigation-logo {
        display: none;
    }
}

Then we should just need a bit more CSS to center the toggle.

Let me know 🙂

[Shawn]

Thanks.

Added the code, now just one logo is displaying. There’s a large amount of white space between the logo and the X MENU text. X MENU appears slightly to the right instead of being centered horizontally in the phone screen. The pages text below X MENU are too far to the left of X MENU.

[Leo]

Reduce the header padding here: https://docs.generatepress.com/article/header-padding/

Then add this CSS:

@media (max-width: 768px) {
    .menu-logo .main-navigation:not(.mobile-header-navigation) .menu-toggle {
        float: none;
    }
    .inside-navigation {
        text-align: center;
    }
}

[Shawn]

Reduce heading padding but still a lot of space between logo and X MENU. I need to enlarge the logo for mobile view so I’ll leave spacing alone for now.

The X MENU isn’t centered horizontally left to right. If you go to the ABOUT page, you’ll see what I’m referring to.

Thanks.

[Leo]

So here you can see where is spacing is coming from:
https://www.screencast.com/t/AqXsqPAqsuu

Reduce the padding should definitely work. You might want to crop the logo image again so there is less white at the bottom too.

I have adjusted the CSS above too:
https://generatepress.com/forums/topic/align-mobile-menu-items/#post-750832

[Shawn]

Thanks Leo.

The logo is an svg file and is cropped tightly already.

Regards,
Shawn

[Leo]

Right now it’s at 85px height which is what you’ve set in CSS:
https://www.screencast.com/t/xReA8B4v

[Shawn]

I’m going to enlarge it as it’s a little small on mobile.

Regards,
Shawn

[Leo]

Awesome. Let me know if you need another look 🙂

[Author]

Posts