Lets add text before or after the mobile menu in DIVI. By default on mobile the menu turns into a hamburger icon. This tip may be useful specially if you want to explicitly add some text next to the hamburger. I read this tip on a Elegant Themes blog few years back and have used it occasionally on my client sites.
Here’s what the default menu looks like in DIVI. I have changed the color of the hamburger menu to black in this case. Read this post, If you want to know how to change the color of the mobile menu.
Default mobile menu in DIVI
Add Text After the Mobile Menu
Here is the css you will need to add text after the hamburger menu. Head over to your style.css in your child theme and paste the following CSS. Alternatively you can also go to DIVI -> Theme Options and paste the css in the Custom CSS box.
/* Add text after the hamburger menu in DIVI */
.mobile_menu_bar:after {
position: relative !important;
content: ‘My Menu’;
bottom: 10px;
left: 12%;
color: black;
}
This will look like the following. Change the text and color to match your website colors.
Text after mobile menu
Add Text Before the Mobile Menu
You can also add the text before the hamburger menu. For that use the following CSS.
/* Add text before the hamburger menu */
#et_mobile_nav_menu:before {
content: ‘My Menu’;
position: absolute !important;
bottom: 29px;
right: 35px;
color: black;
}
Here’s the result of the CSS.
Text before mobile menu
This is an easy tip to customize your DIVI site, with a few lines of CSS. I hope you liked this tip and if you do use it on your site, do leave a comment. For more such tips on WordPress and DIVI, check out my DIVI Blog.
13 Comments
Submit a Comment
I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.
Thank you for this tutorial. How would one add a custom icon after the hamburger menu, instead of text?
Hi Veronica,
Sorry for the late reply. If you want to use one of the ET icons after the Hamburger Menu its easy to do that. Or else you can also add your own custom Icon or image. I will mention both in this reply.
1) To add a DIVI custom icon you can first go to the following website
https://dividezigns.com/divi-icon-codes/
Find out the unicode for the icon you want to use. For example \e090 is the unicode for a phone icon.
Next change the css to the following with your unicode. That should do it.
/* Add icon after the hamburger menu in DIVI */
.mobile_menu_bar:after {
position: relative !important;
font-family: ‘ETmodules’;
content: “\e090”;
bottom: 10px;
left: 12%;
color: white;
}
2) If you want to use your own icon that you have uploaded in your media library.
Find out the full path – url for your own icon.
To put a custom image in as your icon, use this as the content line (in the above css) and replace the URL with your uploaded image file:
content: url(REPLACE_THIS_URL);
I hope this helps. Let me know if you need any more help.
Hi Veronica, If you like a screenshot I can email you as to how it will look. But it should be pretty straightforward if you follow the above steps.
Is it possible to make the icon clickable? How can i connect this extra icon to a link
Thanks in advance!
Hi Christopher,
Check this post out from dan from Divi Booster.
He shows a way of how to add links before the menu.
Hope that helps.
https://divibooster.com/add-links-beside-mobile-menu-button/
Hi! Great Post! My prop down menu is more like a long bar at the moment (endersby.dk) where I’ve removed the text. Is it possible to add a logo (like your example) instead and just have the 3 lines without the box?
Thank you!
Hi Nanna, This is happening, because you have chosen the centered inline logo in your DIVI Theme Customizer Options (in the Header Format). Here is a link that will help you, to have a logo on the left and the drop-down on the right. You will have to add the Script and the CSS shown in the following post. Let me know if that works for you.
https://divibooster.com/use-default-mobile-menu-with-the-centered-inline-logo-header/
Regards
Thanks for posting this very useful code. It doesn’t appear to work when using the theme builder menu module. Any idea how to add the title to the menu using the menu module?
Hi Steve
Try this piece of code. You will have to tweak the margin and left pixels.
.mobile_nav::before {
content:’Menu’;
position: absolute !important;
margin-top: 5px;
left: 50px;
}
is it also possible to make the text clickable? so even the persons clicks on the menu tekst or the burger icon it shows up the menu??
people are clicking on the menu text 🙂
Hi Achmed,
Check this post out by dan. This will make the text linkable.
https://divibooster.com/adding-text-before-the-divi-menu-button/
Girish
Hi Girish,
Maybe you could help… Only in Safari on mobile devices the hamburger shows as a lowercase “a” and the up-arrow in the “back to top” slider shows as a “2”.
E.g. snmc.com, nyvc.com, florastiemer.nl etc.
Maybe because the TLD is using HTTPS but the Divi font ETmodules is being called with unsecured HTTP. I might be wrong.
Would you be able to suggest a solution to this? My client are unhappy with this flaw and I don’t want to ditch Divi just because of this 🙂
Hi Marly, What version of DIVI are these sites using. I did notice the a character on nyvc site on the mobile on safari, but it went away.
Can you flush all the cache? Also go to Divi – > Theme Options -> Builder Tab – Advanced Tab – and click on Clear (Static CSS File Generation). See if that fixes the issue.