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

Hi Fernando,

Thank you! The CSS code is work well. But, I see that when I clicked the humberger menu, the drop down menu appear at the top of the humberger menu. Could you make it below the humberger menu and button?

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

Yes, that's perfect! Thank you!
Ah, one more question: How to make the menu and the button sticky only on mobile?

Should I create a new ticket for this?

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/

Yes, I have set the Sticky navigation to Mobile Only.

The menu appear on sticky navigation, but the button is not.

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?

I have made change the hook into menu_bar_items. The button now is located to the right of the screen (on mobile). Also, the button located directly beside humberger menu on mobile.

Maybe some CSS code can make it located on the left?

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

Hi David,

Thank you so much for your help. Now, everything is perfect.

Glad we could be of help!