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

[Charbel]

Many Thanks @David!!!

All the best,

[David]

Glad we could be of help

[Charbel]

Hello @David,

Hope you are doing well.

I want to come back to this ticket, please.

I have changed my Mobile Menu Text and I have lost the center of the text label.

This was the previous code that you shared but is not working anymore with the new text.
I need to keep the hamburger icon on the left while the text centered.
Could you please help?

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

Site: https://charbelnemnom.com

P.S. Additionally, I changed the icon type under General from SVG to Font as described here to improve performance: https://wordpress.ezoic.com/generatepress-ezoic-leap/ because Ezoic Leap is an accelerating tool and will cause performance degradation if we keep it to SVG.

Thank You @David!

[Leo]

Are you trying to have both the toggle and text in the center or just the text?

[Charbel]

Thank you @Leo for your support!

No, I want to keep the toggle (hamburger) icon on the left and only the text centered, please.

I have removed the CSS code share above because it’s not working anymore.

Thanks!

[Leo]

Try this:

@media (max-width: 768px) {
    .menu-toggle .mobile-menu {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

[Charbel]

Thank You @Leo,

It’s working on some mobile devices with big screens.
However, if you have a small screen (e.g. First-generation iPhone X), the second word is coming on a new line and not readable.
As you can see, the Title is set to (Cloud & CyberSecurity). The word CyberSecurity is coming on a new line.

You can see it if you run Google PSI for mobile here: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcharbelnemnom.com%2Fdeploy-azure-network-address-translation-nat-gateway%2F&tab=mobile

Please advise?

Many Thanks!

[Charbel]

Hello @Leo,

I played with the percentage to try and center it for small mobile devices.
I used this CSS code:

@media (max-width: 768px) {
    .menu-toggle .mobile-menu {
        position: absolute;
        left: 40%;
        transform: translateX(-30%);
    }
}

What do you think?
On large mobile devices, the text is still aligned more on the left-hand side. Can we center it across all mobile screens size?

Thanks!

[Leo]

However, if you have a small screen (e.g. First-generation iPhone X), the second word is coming on a new line and not readable.

iPhoneX seems to work fine when I use the mobile simulator:
https://www.screencast.com/t/a4HDBAQ3qDKQ

That issue simply means there isn’t enough room for all the content to fit in one line.

The only solution is to reduce the text size by adding something like font-size: 11px; to your CSS.

[Charbel]

Thank you @Leao,

Is the full CSS code below correct now? I have added the font-size.

@media (max-width: 768px) {
.menu-toggle .mobile-menu {
position: absolute;
left: 40%;
transform: translateX(-30%);
font-size: 11px;
}
}

Thanks!

[Leo]

Yup that looks good.

[Charbel]

Thank You @Leo for your guidance on tackling this issue.

All the best,

[Leo]

No problem 🙂

[Author]

Posts