How to Add Menu Title to Divi Mobile Menu

Add a Title to Elegant Themes Divi Mobile Menu or “Hamburger Menu”

Divi Hamburger Menu

Mobile devices and tablets in portrait orientation typically display a navigation menu that’s affectionately referred to as the “Hamburger Menu”.  This menu style gets its name from from the fact that the menu is typically 3 simple horizontal stacked lines that resembles how a hamburger is put together. The problem is that many mobile device users still do not recognize this as a website menu button. For the life of me I do not understand why the title “Menu” is not standard on not just Divi but all hamburger style navigational menus. Elegant Themes offers an optional Divi 100 add-on that includes 20 additional hamburger menu icons. None contain the “Menu” title. Fortunately the fix is simple.

Add the Word “Menu” To Divi Mobile Menu

How do you add the title “Menu” to the Divi mobile menu?

1. From the WordPress dashboard navigate to Appearance>>Customize>>Additional CSS
2. Copy the following code:.mobile_nav::before { content:'Menu'; vertical-align:top; line-height:2.2em; }
3. Paste the copied code in to the Custom CSS field. **Note** The code should be placed at the end of any existing code in the box.
4. Save the changes.

Customizing the title of the Divi mobile menu

In the code above the word “Menu” can be replaced with any text you chose. The text size can also be modified by editing the 2.2em. Higher number equals bigger text and vice versa.

Note – This does not work on the Elegant Themes Extra Theme.