[Resolved] How to center the text label for Mobile Menu?

Hi there,

Unfortunately that’s not possible using the mobile menu label.

Can you add the text using the generate_inside_mobile_menu_bar with a hook element?
https://docs.generatepress.com/article/hooks-element-overview/

After I enabled Mobile header “on” under Appearance > Customize > Layout > Header, I lost my blue logo which was above the Mobile Black Menu.
If I add the logo under Layout > Header, the logo is added within the black menu and not above the Menu.
I want the logo to be above the Menu as well.

Ah my bad. I’ve checked the actual code and generate_inside_mobile_menu_bar can be used regardless if “mobile header” is on”. The only setting need is to be able to use this is to enable the Navigation search on Appearance > Customize > Layout > Primary Navigation which was mentioned here: https://docs.generatepress.com/article/generate_inside_mobile_menu_bar/

But it didn’t mention about it not working if flexbox is set in Appearance > Customize > General.
https://github.com/tomusborne/generatepress/blob/e030f57d2c26991074a6868265737424dac567d0/inc/structure/navigation.php#L568

Can you revert back to setting the mobile header off? Let’s try a different approach as setting the site to floats may not be preferable just to make generate_inside_mobile_menu_bar work.

Let us know.

Hi there,

try adding this CSS to center the menu label:

@media(max-width: 768px) {
    .main-navigation.has-menu-bar-items button.menu-toggle {
        display: flex;
        flex-grow: 1;
    }
    button.menu-toggle .gp-icon {
        margin-right: auto;
    }
    .menu-toggle .gp-icon+.mobile-menu {
        margin-left: auto;
        margin-right: auto;
    }
}