How To Add The Text “Menu” Next To The Divi Hamburger Menu

Mark Hendriksen | April 28, 2021 | 11 Comments

In this little tutorial, we are going to add the text “Menu” or any text you like next to the hamburger icon to make it more descriptive.

For the default menu

For the default menu you can use this snippet and place it in Divi > Theme Options > CSS .

/* ### menu text for default menu ### */
#et_mobile_nav_menu:before {
    content: 'MENU';
    font-size: 14px;
    position: absolute !important;
    bottom: 29px;
    right: 40px;
    color: #000000;
}

You can change the text Menu between the quotes in something else if you like.

For the menu in the Theme Builder

Use this snippet if you have build a custom menu in the Theme Builder. You can place the snippet in Divi > Theme Options > CSS.

/* ### menu text for menu with theme builder ### */
.et_mobile_nav_menu:before {
    content: 'MENU';
    font-size: 14px;
    position: absolute !important;
    top: 4px;
    right: 40px;
    color: #000000;
}

And that’s it for this tutorial.

You might also like…

11 thoughts on “How To Add The Text “Menu” Next To The Divi Hamburger Menu”

  1. Thank you so much for this! Is there any way to change the word on different pages? I want the page name to be on each page. 😊

    Reply
  2. Great. And super nice presentation too. I appreciate not having to read your life history to get this snippet. One thing… It would be great if the word “menu” was also linked to trigger the menu. Possible?

    Reply
    • Hi Kc,

      That is a good question and I do not have a solution for that right now. But I will see if there is a possibility for this.

      In the coming weeks, I will be releasing some new menu tutorials so I will see if I can come up with a solution for this.

      Reply
      • Awesome. Thank you. I’ll also be thinking about how to solve this. Seems like it’s probably going to require some php or javascript

        Reply

Leave a Comment

0 Shares
Share
Pin
Tweet