Add Text To Your Divi Mobile Menu
An easy way to add text to your divi mobile menu
In this post, I am going to show you a super-easy way to add text to your Divi mobile menu, next to the hamburger icon, by using a small CSS code snippet.
Then I will show how to change the hamburger icon to an “X” when the mobile menu is open.
Let’s dive right in.
Here's what the final product will look like
1) Navigate To “Custom CSS”
In the sidebar menu on your WordPress dashboard, navigate to the Divi Custom CSS section.
Divi > Theme Options > Scroll down to the bottom and find the section that’s called “CUSTOM CSS”.
This is where we will paste our CSS code snippet.
This is what the section looks like.
↓
2) Paste the following code
/* Place the word MENU after the mobile hamburger */
.mobile_menu_bar:after {
content: ‘MENU’;
position: relative !important;
bottom: 10px;
left: 10%;
color: #ad05f5;
}
/* Change the hamburger to X when opened */
.mobile_nav.opened .mobile_menu_bar:before {
content: ‘\4d’;
}
2) Style The Text
content: ‘MENU‘;
You can also change the colour of the text by adding your preferred colour
color: #ad05f5;
You can change the text that I have made BLUE to anything that you want.
Newsletter
Subscribe to our newsletter if you would like to join our mailing list where you will receive things like specials, giveaways, and news. Don’t worry, we will NEVER send you any spam.
3) Don’t Forget To Save
Click save.
TADA!
That’s it. Now you know how to add text to your divi mobile menu by adding a simple CSS code snippet.
Why Choose Us?
We take great pride in all of our design projects and we insist on delivering excellent websites to all our customers, no matter how big or small your company is.
Only pay us for the job once you are 100% satisfied with your new website.
We offer a lifetime after-sale support service for all of our customers.
This is so cool thnx I have been wanting to do this for a long time but had no idea where to start. I love how the icon turns to a x when you open it.
Hi Laura, im so glad that I was able to help! All the best
I’m struggling abit. What will the code be if I want the text to say OPEN? Sorry I am new to divi and wordpress
Hi Adrienne, use the following code:
/* Place the word MENU after the mobile hamburger */
.mobile_menu_bar:after {
content: ‘OPEN’;
position: relative !important;
bottom: 10px;
left: 10%;
color: #ad05f5;
}
/* Change the hamburger to X when opened */
.mobile_nav.opened .mobile_menu_bar:before {
content: ‘\4d’;
}
This is so awesome! Thank u very much for making it so simple to understand and copy.