[Resolved] How to make logo center only on mobile and menu below it

Hello Willya,

Can you try adding this CSS through Appearance > Customize > Additional CSS?:

@media (max-width: 768px) {
    .site-logo {
        flex-basis: 100%;
        text-align: center;
    }

    nav#mobile-menu-control-wrapper {
        order: 1;
    }

    nav#site-navigation {
        order: 2;
    }
}

I see. I updated the code above. Can you try that instead?

You’re welcome!

I can answer it here. You can try turning on the Sticky Navigation for Mobile through Appearance > Customize > Layout > Sticky Navigation.

Reference: https://docs.generatepress.com/article/sticky-navigation/

I see. If you want that button to appear on sticky as well, you’ll need to hook it to menu_bar_items for instance. Can you try this and see how it goes?

Hi there,

try this CSS to re-arrange the menu bar items on mobile:

@media(max-width: 768px) {
    .main-navigation {
        width: 100%;
    }
    .menu-toggle {
        flex-grow: 0 !important;
    }
    .menu-bar-items {
        order: -1;
        margin: 0 auto 0 10px !important;
    }
}

And in Customizer > Layout > Header switch to mobile view and reduce your left and right margin to 0

Glad we could be of help!