How to add text “Menu” after the hamburger menu icon

Hi,

To add the “Menu” text after the hamburger, you can add the following CSS inside the Additional CSS panel of the Customizer (see our quickstart guide to see how you can add custom CSS):

.wp-block-navigation__responsive-container-open::after {
    content: "Menu";
    margin-top: 4px;
    margin-left: 4px;
}

You might need to adjust the margins depending on your design.

Hope that helps,
Diane

Hello Diane,

Thank you very much for your response.

I was able to get “Menu” after the hamburger by doing the following:

1. made a CSS class “menu-toggle”.
2. Additional CSS Class
`@media screen and (max-width: 768px) {
.menu-toggle:after {
content: ‘Menu’;
font-size: 14px;
}

One problem. The word “Menu” from the 2022 theme also appears below the 3 bar Twentig hamburger. If you turn it off, then the 2 bar theme icon shows.

If I could I would completely disable the theme mobile icon and text.

Thank you.

Joe

Hi Joe, would you please share your site’s URL so I can see the issue?
Thanks

Hello @twentig ,

The URL is https://ordia.com

Thank you.

Joe

Thanks for the URL. The issue is that you’ve added the menu-toggle class in 2 locations. You’ve added it on the navigation block (which is OK) but also on the header template part. Try to remove it from the header template part, and it should work.

Hello @twentig

I removed menu-toggle from Additional CSS Class. I now have one “Menu” but it is the one from the 2022 Theme. i would rather have the one from Twentig only.

Thank you.

Joe

On your website, the menu-toggle class is still added to the header part. This is what I see in your code: <header class="menu-toggle wp-block-template-part">

Remove your previous CSS code:

@media screen and (max-width: 768px) {
    .menu-toggle:after {
        content: 'Menu';
        font-size: 20px;
    }
}

and replace it by the following one:

.wp-block-navigation__responsive-container-open::after {
    content: "Menu";
    font-size: 20px;
}

That should do the trick.

Hello @twentig

Thank you very much! It worked like magic. It’s exactly what I have been hoping to do for several weeks now. I added a little padding to center “Menu” better.” The final code is

“`.wp-block-navigation__responsive-container-open::after {
content: “Menu”;
font-size: 15px;
padding-top:3px;
}”

You have truly stuck with me, looked under the hood, identified the issues, and patiently guided me through this process.

As a small gesture of my appreciation, I went to Twentig website and made a small donation. I received a receipt from PayPal “You donated xxxx USD to [email protected]” You have a great product, and you provide outstanding support.

Many thanks.

Joe

Hi Joe,
Glad it works. Thank you for the donation, it’s very much appreciated.
Have a nice day.