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.

Related Posts –

• Change the Color of the Hamburger Menu on Mobile and Tablet.
• Change Mobile Menu Top Border in DIVI

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.

Do you want to change the color of the hamburger icon on your mobile menu and tablet for your DIVI website.?

Add the following CSS snippet to your DIVI theme and change the color to match your website colors. You can add the CSS either to your style.css in your child theme OR go to the DIVI- Theme Options on your dashboard. In the General Tab, scroll down to the “Custom CSS” text area.

I have set it to a shade of yellow (#d9b310) in the example below, to match my website colors. Replace the (#d9b310) in the code to the color of your choice to match the branding of your website.

/* Change color of the hamburger menu on tablet and mobile*/
span.mobile_menu_bar:before {
     color: #d9b310!important;
}

Here is what it looks like when viewing my site on mobile.

Changing the color of the Hamburger Menu only on a specific page in DIVI

You can also tweak the color of the hamburger or mobile icon only on a specific page in DIVI. I use this trick sometimes if my hamburger icon is not contrasting well with a background slider image. This will override the previous hamburger menu color (if you did set one in the style.css), but only on this specific page.

Open a page in your WordPress dashboard in DIVI. Click on the Page settings as shown below.

Copy the same CSS as shown above in the Custom CSS box. Click on Save and Update your page.

Related Post : Change the color of the top border mobile menu in DIVI.

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.