Adding Text Before the Divi Menu Button

This post may contain referral links which may earn a commission for this site

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:

.mobile_nav::before { content:'Menu'; vertical-align:top; line-height:2.2em; }

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:

.et_header_style_slide #et-top-navigation::before { 
    content:'Menu'; 
    position: absolute; 
    margin-left:-50px; 
    margin-top: 3px; 
}

If you'd like the word "Menu" (or whatever text you use) to be clickable, you can use the following jQuery code:

<script>
	jQuery(function($) {
		$('.et_header_style_slide #et-top-navigation')
			.css('cursor', 'pointer')
			.click(function(e) {
				if (e.target === this) { 
					$(this).find('.et_toggle_slide_menu').trigger('click');
				}
			});
	});
</script>

Want get more out of Divi?

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

11 Comments

  1. Is there a way to have the text link to another page on your site?

    Reply
    • Hi Joshua. Since the text is added as CSS "content" it isn't possible to directly replace it with a HTML link. One way it could be done is by modifying the jQuery given above to follow a link rather than passing the click onto the actual menu button, i.e. by replacing:

      $(this).find('.et_toggle_slide_menu').trigger('click');

      with something like this:

      location.replace("https://www.mysite.com/some-page");

      However, given the current setup you have on the site linked in your comment, there might be an easier way. Since your links in the header are added using text modules, you could just add another similar text module with a link and then set its visibility (under "Text Module Settings > Advanced > Visibility") to control whether it shows only on mobile, etc.

      Hope that helps!

      Reply
  2. Hello there! I was trying this for the Slide in menu. It works fine, but the "Menu" is not clickable, so you can only get the side menu by actually clicking the burger icon. Is there any way to fix this? Thanks!

    Reply
    • Hi Thomas, I've just updated the slide-in menu section of the post with some jQuery code that should make "Menu" clickable. I hope it helps!

      Reply
  3. 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?

    Reply
    • 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!

      Reply
  4. 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!

    Reply
    • 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!

      Reply
  5. Thanks!

    Reply
  6. 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.

    Reply
    • 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!)

      Reply

Submit a Comment

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

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

11 Comments

  1. Is there a way to have the text link to another page on your site?

    Reply
    • Hi Joshua. Since the text is added as CSS "content" it isn't possible to directly replace it with a HTML link. One way it could be done is by modifying the jQuery given above to follow a link rather than passing the click onto the actual menu button, i.e. by replacing:

      $(this).find('.et_toggle_slide_menu').trigger('click');

      with something like this:

      location.replace("https://www.mysite.com/some-page");

      However, given the current setup you have on the site linked in your comment, there might be an easier way. Since your links in the header are added using text modules, you could just add another similar text module with a link and then set its visibility (under "Text Module Settings > Advanced > Visibility") to control whether it shows only on mobile, etc.

      Hope that helps!

      Reply
  2. Hello there! I was trying this for the Slide in menu. It works fine, but the "Menu" is not clickable, so you can only get the side menu by actually clicking the burger icon. Is there any way to fix this? Thanks!

    Reply
    • Hi Thomas, I've just updated the slide-in menu section of the post with some jQuery code that should make "Menu" clickable. I hope it helps!

      Reply
  3. 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?

    Reply
    • 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!

      Reply
  4. 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!

    Reply
    • 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!

      Reply
  5. Thanks!

    Reply
  6. 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.

    Reply
    • 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!)

      Reply

Submit a Comment

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