Center menu button

Hi there,

The link to your site isn't working for me.

Can you double check?

Thanks!

Sure. Blogversion2.mystagingsite.com

Hi Frank,

The new link is the same as the first one, doesn't work for me.

Could you check again?

Sure. Not sure why it’s not working.

https://blogversion2.mystagingwebsite.com/

Admin login

Try this CSS:

@media (max-width: 768px) {
    #mobile-header .menu-toggle {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .main-navigation.has-branding .menu-toggle {
        padding-right: 0;
    }
}

Thank you for this. Can you clarify where this should go?

I tried this but the menu button didn’t move.

I also tried this in a new browser.

Screenshot

Just checked the site and the CSS is indeed working:
https://www.screencast.com/t/hs6AEFtM

I've adjusted the CSS above as well:
https://generatepress.com/forums/topic/center-menu-button/#post-1783542

Does taking this approach allow me to place the site logo below the menu button? I’d like the menu to load before the logo.

In that case, you don't need the CSS provided at all. You just need to disable the Mobile Header feature in "Customize > Layout > Header".

I apologize if I'm making this confusing.

As it stands,

the desktop version: logo is centered but above menu when I need it below the menu
mobile version: menu is on the right and logo is on the left. this isn't what i initially envisioned but it looks pretty good.

can you advise me on the desktop piece?

thanks!

Hi there,

For desktop, you can tell your primary navigation to display above the header: https://docs.generatepress.com/article/navigation-location/

For mobile, you likely just want to disable the Mobile Header option in "Customize > Layout > Header". This will make it so your desktop layout also applies on mobile.

Let me know if that does it or not :)