How to add the word “Menu” next to the Divi mobile menu

Mar 6, 2019

As Web Designers, we known that the mobile menu icon (or burger menu) is how you open the menu on mobile. However this isn’t as obvious for everyone, especially for people who didn’t grow up with the internet!

This can be an issue if people viewing the website on mobile are unsure how to open the menu and navigate around the website.

In order to avoid this and make the menu really stand out, I like to add the word “Menu” next to the mobile menu icon.

Unfortunately this isn’t a native option within Divi, but it can be achieved with just a little bit of CSS.

If you’d like to do this on your own site all you need to do is add the code below into the custom css tab of your Divi Theme Options:

span.mobile_menu_bar.mobile_menu_bar_toggle:after {
content: 'Menu';
position: absolute;
left: -40px;
bottom: 35px;
cursor: pointer;
}

Depending on how your menu is setup, you’ll likely need to change the “left” and “bottom” values to align it correctly.

Hint: you shouldn’t need to change the values by more than +/- 10px

If you’d like to see this in action you can checkout the mobile version of my free SaaS Divi template. You can also download the template for free.

Let me know if you have any questions in the comment section below! Or feel free to drop me an email at: hello@andyhooke.co.uk

You can also checkout more Divi tutorials below.