Six Tips for a Better Divi Mobile Menu + Free Header Template Download

✏️ 2020-05-14 | Divi | 0 comments

✅ Works with Divi 4 (Theme Builder) ✅ Works with Divi 3 (Theme Customizer) ✅ No plugins required ✅ No JavaScript or extensive coding
Skribent: Victor Duse
By Victor Duse

The Divi 4 update with the Theme Builder has opened up new design possibilities for Divi’s mobile menu, but with a few simple CSS tricks you can make the hamburger menu even better. We also provide a free header template that you can upload in the Divi Theme Builder. Tested with Divi 4.4.7.

Before (Divi default menu)

Before: Default Divi mobile menu

After (with all six CSS snippets)

After: A better Divi mobile hamburger menu

Getting started

1. Add text left of the hamburger icon

2. Change collapse icon to X when open

3. Remove the mobile menu top border line

4. Center align mobile menu link items

5. Make the mobile menu full width

6. Make the mobile menu full height

All CSS snippets in one place

BONUS: Download a free header template

We have created a header layout that you can import into the Divi Theme Builder. The layout contains all six enhancements from the article article + a top bar with social media icons and contact information with phone number + email address.

Download the header template

  1. Enter your e-mail address below to subscribe to our newsletter. (You will never receive duplicate newsletters.)
  2. Download the zip file containing the header template
  3. Extract the zip file on your hard drive.
  4. Import the divimundo-menu-template.json file into the Header area in Divi > Theme Builder.
  5. Adjust the design and use freely. The CSS code is placed in a Divi Code Module in the layout.The easiest way to find it is by using the Wireframes mode in the Divi Builder.

The newsletter contains tips, guides and offers and is sent out approximately every other month. You can at any time unsubscribe. We will never sell or share your email address. Your email address is stored at Mailchimp.

1. Add text left of the hamburger menu icon

Although the three bars that make up the so-called hamburger menu have been around for a long time, it may be appropriate to clarify that the icon contains a menu that can be expanded.

Please note that the hamburger icon should be right-aligned for the text to appear correctly.

Step by step

  1. Log in to WordPress and go to Divi > Theme Customizer > Custom CSS
  2. Paste the following CSS code:
/* Text left of hamburger in Theme Builder */

.et_mobile_nav_menu:before  {
content: 'MENU';
position: absolute;
right: 40px;
}

/* Text left of hamburger in Divi 3 */

#et_mobile_nav_menu:before  {
content: 'MENU';
position: absolute;
right: 33px;
bottom:30px;
}

3. You can change the text MENU to anything you want, but keep it short and sweet.

4. Increase or decrease the right:40px value to adjust the spacing between “MENU” and the hamburger icon.

5. Save.

The result:

Using the Divi 3 header and displaying the search icon? To avoid overlapping content, just hide the search icon in Divi > Theme Customizer > Header & Navigation.

2. Change the collapse hamburger icon to X when open

The fact that the hamburger icon, with its three lines, turns into a X when expandning the mobile menu is standard in most WordPress themes and apps, but – oddly enough – not in Divi. Fortunately, only a couple of lines of CSS are required to fix this and improve the user experience (UX) for your website visitors.

Step by step

  1. Log in to WordPress and go to Divi > Theme Customizer > Custom CSS
  2. Paste the following CSS code:
/* X icon in expanded mobile menu */

.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}

3. Just add color:#000; before the last } tag to change the icon color. Replace #000 (black) with the color of your choice.

4. Save.

The result:

3. Remove the mobile menu top border line

The blue line at the top of the mobile menu is a clear hint that your website is made with But if you don’t want your menu to look like  Divi. But if you don’t want your mobile menu to resemble everyone else’s, you can remove this line.

Step by step in Divi 3

  1. Log in to WordPress and go to Divi > Theme Customizer > Custom CSS
  2. Paste the following CSS code:
/* Remove the top line in the mobile menu*/

.et_mobile_menu {
border-top:0px;
}

2. Save.

Step by step in Divi 4

The CSS snippet above will do the job perfect also with Divi 4 headers created in the Theme Builder. But if you prefer to use the Divi Builder instead of adding custom CSS, that’s possible in the Theme Builder.

  1. Open the Theme Builder
  2. Open your Header Template
  3. Click the cogwheel to edit the Menu Module
  4. Go to the tab Design > Dropdown Menu and change Dropdown Menu Line Color to rgba(0,0,0,0)
  5. Save.

This will give the line zero opacity, thus making it invisible.

 

The result:

The top line has a tendency to overlap the mobile menu when using the Theme Builder. By hiding the line, you don’t have to worry about that.

4. Center align mobile menu link items

Brief lines of text tends to look better when being center-aligned on mobile devices. It is not possible to center-align the mobile menu links with the Divi Builder or the Theme Customizer settings, but a couple of lines of CSS will solve the problem – both in Divi 3 and Divi 4.

Step by step

  1. Log in to WordPress and go to Divi > Theme Customizer > Custom CSS
  2. Paste the following CSS code:
/* Center-align moble menu items */

.et_mobile_menu li {
text-align:center !important;
}
  
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0px !important;
}

2. Save.

 

The result:

5. Make the mobile menu full width

This is a tweak that I recommend everyone to implement: Let the mobile menu fill 100% of the device width instead of hanging down like a strip.

Step by step

  1. Log in to WordPress and go to Divi > Theme Customizer > Custom CSS
  2. Paste the following CSS code:
/* Make mobile menu fullwidth */

.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}

2. Save.

The result:

6. Make the mobile menu full height

Once you have the fullwidth mobile menu in place, the next step is logical: To let the mobile menu fill in the entire height of the mobile screen. We will also add some padding (50px) to the top.

Step by step

  1. Log in to WordPress and go to Divi > Theme Customizer > Custom CSS
  2. Paste the following CSS code:
/* Make the mobile menu full height */

.et_mobile_menu {
min-height:100vh;
padding-top:50px !important;
}

2. Save. 

The result:

We use min-height instead of the absolute height to avoid content from being cropped out from the mobile menu.

All CSS snippets in one place

Here are all the six CSS-snippets gathered in one place.

Step by step

  1. Log in to WordPress and go to Divi > Theme Customizer > Custom CSS
  2. Paste the following CSS code:
/* Text left of hamburger in the Theme Builder */
.et_mobile_nav_menu:before  {
content: 'MENU';
position: absolute;
right: 40px;
}

/* Text left of hamburger in Divi 3 */
#et_mobile_nav_menu:before  {
content: 'MENU';
position: absolute;
right: 33px;
bottom:30px;
}

/* X icon in expanded mobile menu */
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}

/* Remove the top line in the mobile menu*/
.et_mobile_menu {
border-top:0px;
}

/* Center-align moble menu items */

.et_mobile_menu li {
text-align:center !important;
}
  
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0px !important;
}

/* Make mobile menu fullwidth */
.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}

/* Make the mobile menu full height */
.et_mobile_menu {
min-height:100vh;
padding-top:50px !important;
}

2. Save.
 

The result:

Did you know that mobile internet traffic surpassed internet traffic from desktop computers back in 2016?

Two more tricks for a better mobile menu

Here are two blog posts from Elegant Themes that will take you mobile menu to the next level. Test thorough if you combine them with the CSS snippets in this article, since there could be design conflicts.

Free Divi plugin with 20 extra Hamburger Menu Styles

Create a Mobile Collapsing Nested Menu with the Divi Theme Builder

 

Related posts

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.