A better mobile menu style for Divi

A better mobile menu style for Divi

Here’s a modification for your Divi mobile menu that does three main things.

1. Reduces the distance between the logo and the left side of the screen, and the closed mobile menu and the right side of the screen. This creates more of an ‘app style’ look and feel.

2. Changes the menu icon from three bars (or a burger) into a cross when the menu is open. This feels more like a toggle to me and clearly indicates that the button should now be used to close the menu.

3. Makes the drop down menu fill the view port width. I’ve never been a huge fan of space showing on either side, so this fixes that.

You can see all three effects in play in this short video:

 

All you need to do to get this to work is add the following CSS to your ePanel or child theme.

 

/** App Style header and Drop Down Menu **/

@media (max-width: 980px) {
 .container.et_menu_container { 
 width: calc( 100% - 60px);
 }
}

.et_mobile_menu {
 margin-left: -30px;
 padding: 5%;
 width: calc( 100% + 60px);
}

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

Looking at those three chunks of CSS & what they do.

 

 

The first piece expands the width of the container that holds the logo and the burger menu. This makes them appear closer to the left and right edges. By using the ‘calc’ function we effectively create 30px of padding on each side of the centred container without having to add any padding.

By default the mobile menu width is being dictated by the container we just edited. but we want it to be wider, so in the second piece of code we have pulled it to the left by 30px with a negative margin (that takes care of the space on the left) and set its width to 60px more than it’s default full width (which takes care of the space on the right). The use of percentages keeps this whole thing responsive from tablet to mobile.

The third piece of code utilizes the built in icon font that Divi uses called ‘ETmodules’ to call a cross icon instead of a burger icon.

You can use each of this snippets on its own or all three together to create the app style effect in the video above. Happy coding!

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.