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 Header Menu Button using Divi Booster
Divi Booster includes an option for adding text to the menu button. You'll find it at:
Divi > Divi Booster > Header > Mobile Header > Add text before menu button
Simply enable the option, enter your text and save the settings.
Adding Text to the Default Header Menu Button using CSS
If you're comfortable adding CSS (and possibly jQuery) to your site, here's the DIY method of adding the menu button text.
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; }Related Post: Adding CSS to the Divi Theme
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;
}Related Post: Adding CSS to the Divi Theme
<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>Related Post: Adding JavaScript / jQuery to Divi.
Styling the Menu Button Text
Here is an example of the CSS code to change the color of the menu button text, which will work for both the mobile menu button and the slide-in menu button:
.mobile_nav:before,
.et_header_style_slide #et-top-navigation::before {
color: red;
}Related Post: Adding CSS to the Divi Theme
Adding Text to the Divi Menu Module Menu Button using CSS
If you're using the Divi Menu module, e.g. in a custom header built using the Divi Theme Builder, then the following CSS can by used to add text before the mobile menu button:
.et_pb_menu .et_mobile_nav_menu:before {
content:'Menu';
color: white;
font-size: 18px;
padding-right: 8px;
padding-top: 3px;
}Note that:
- You may want to replace .et_pb_menu with a class specific to your menu module to prevent it from affecting any menus elsewhere on the site
- The word "Menu" isn't clickable.
By default this text is grey – how can you change the colour, say to white?
Hi Philip, I've added a section to the end of the post with details on how to do this, but basically copy and paste this CSS code:
.mobile_nav:before, .et_header_style_slide #et-top-navigation::before { color: white; }Into the "Divi > Theme Options > General > Custom CSS" box and you should be good to go. Let me know if it doesn't do what you need, though. Cheers!
How can we link this to another external URL?
Hi Aazib, it's not really possible to point the text added by this post to another URL because it's added as CSS styling, rather than a HTML element. However, this post describes a way to add links before the menu button, which might help you:
https://divibooster.com/add-links-beside-mobile-menu-button/
Let me know if that doesn't do what you need. Thanks!
Is there a way to have the text link to another page on your site?
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!
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!
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!
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?
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!
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!
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!
Thanks!
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.
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!)