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

[Charbel]

Hello Team,

Could you please advise how to center the text between the Hamburger icon on the left and the Search Icon on the right for mobile devices (Black Menu).

Here is my site: https://charbelnemnom.com

Many Thanks!
-Charbel

[Leo]

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/

[Charbel]

Hello @Leo,

I have added a new Hook, then I choose generate_inside_mobile_menu_bar, and added the text. I set the Display Rules to the Entire Site, right?
I removed the text from the primary navigation Mobile Menu Label.
I can see now that the text is completely gone. It’s not showing for mobile.
Could you please advise?

Thank You!

[Charbel]

I can see that I want to add a PHP code to use that Hook in my functions.php.
Could you please advise what is the exact code to center the text label?

The Hook name is Mobile Menu Label Center

https://docs.generatepress.com/article/using-hooks/

Many Thanks @Leo!

[Elvin]

Hi,

generate_inside_mobile_menu_bar only works if you have Mobile header set to “on” on Appearance > Customize > Layout > Header. Else, things that are hooked on it won’t display. Your site doesn’t seem to have a Mobile Header enabled.

I’m not exactly sure I fully get what layout you’re trying to achieve. Do you have any mockup images or reference sites you want to replicate? so we could have a clearer idea of what’s the best approach to this.

Let us know.

[Charbel]

Thank You @Elvin for your support!

I want to replicate that site https://adamtheautomator.com/. If you open it on Mobile, you can see that the text label (Adam the Automator) in the Black Menu is centered.

I just enabled Mobile header “on” under Appearance > Customize > Layout > Header.

What else should I do to center my text label (Charbel Nemnom – MVP | MCT) between the Hamburger icon and the search icon on mobile?

Many Thanks!

[Charbel]

Hello @Elvin!

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.

[Elvin]

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.

[Charbel]

Thank you @Elvin,

I have reverted back to setting the mobile header to OFF.
Now the blue logo is showing above the Black Menu great!
Could you please check?

How can we center the text label please?
What is the best approach without setting the site to floats?

[David]

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

[Charbel]

Thank you @David, much appreciated your support!

I have just added the CSS and cleared my cache.

I still do not see that the Menu Label text is centered.

Could you please check?

Do I still need to use the Hook mentioned before generate_inside_mobile_menu_bar?

Thank You!

[Charbel]

The text is still aligned to left close to the Hamburger icon.

Thank You @David

[David]

Well it ‘enters’ on a larger device eg. Portrait Tablet, but for Mobile there just isn’t enough room for it to align center…..

[Charbel]

Ah thank you @David, I have just tried using different devices using Google Chrome Emulated Devices, I can see that the text is centered now. I was trying on iPhone X.

Could you please advise if the CSS code you shared will slow down the page performance?

P.S. I removed and deleted the hook generate_inside_mobile_menu_bar

Many Thanks @David!

[David]

No that CSS will have no impact on performance.
CSS only becomes an issue of you’re adding 100-100’s of lines of CSS.

[Author]

Posts