Adding Text Before the Divi Menu Button

The Divi Theme will, in some header configurations, display a three-lined "hamburger" menu button. If you'd like to add a bit of text, such as the word "Menu" before the button, here's how to do it.

Adding Text to the Default Menu Button

If you'd like to add text before the mobile menu button (the one with three lines) in the default Divi header format, you can use the following CSS:

Adding Text to the Slide-in Menu Button

When the slide-in header menu style is used, Divi implements the button in a different way (even though it looks the same) to the default header menu button. To add text before the slide-in menu button, you can use the following CSS:

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin


  1. Anton Juul-Naber

    Thank you for taking your time to make this. Unfortunately it didn't work for me on Divi 3.0.98.
    There exists no element called .mobile_nav. I tried replacing it with .mobile_menu_bar but that just created a bunch of scrambled text-icons instead.
    I am using the "slide in" menu. Is that why it doesn't work?

    • dan

      Hi Anton, yes the reason it wasn't working for you is that the "slide in" menu button is implemented differently to the default header format menu button I originally wrote the code for.

      I've just updated the post with a separate version for the slide in menu button. Hopefully it will do what you need. Let me know if not. Thanks!

  2. Katie Ulanov

    Hi, just tried this and the word didn't show up. I removed the code and now the spacing is funky on the phone view. I see no stray code. Help!

    • dan

      Hi Katie, any chance you're able to share a link to the page you're working on? I'll see if I can spot the problem. Cheers!

  3. Robert


  4. Mike Mosley

    Hello! I tried this trick and like it except for one thing…when i click on the new "Menu" word instead of the "hamburger" it made this annoying flash…similar to when you highlight text…so i went ahead and removed the code from the Divi Theme Options where you can add extra CSS. Now I have a problem because after i removed it the "hamburger" will not come back…it is just blank there now. I can click on the area where it is supposed to be and the menu will open…so the menu is still there but the "hamburger" won't display like it used to. Also, it effected my full width menu as well…and absolutely nothing displays on it now either.

    • dan

      Hey Mike, sorry for the slow reply.

      It was indeed text highlighting that you were seeing. The text wasn't a link so when you clicked on it the browser tried to selected it, causing the text to be highlighted. I've updated the code so now the text is part of the menu button link. Clicking it brings up the menu, and it shouldn't flash like it did before.

      The hamburger issue shouldn't be caused by just removing the code from the Divi Theme Options. My guess is maybe something was left behind or something else deleted, which is messing up the rest of your CSS. If you're still having the problem, send me a URL for the affected page and I'll take a look (and won't take so long getting back to you this time!)


Submit a Comment

Your email address will not be published. Required fields are marked *