Align mobile menu items

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.

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;
    }
}

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

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

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.

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

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.

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;
    }
}

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.

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

Thanks Leo.

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

Regards,
Shawn

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

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

Regards,
Shawn

Awesome. Let me know if you need another look :)