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.

Previous post
Next post

17 Comments

  1. Frode

    I really like this snippet. But I would like the header to have some opacity and tried this;
    @media only screen and (max-width: 980px)
    #main-header {
    background-color: #fff;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
    }
    I didn´t work Anybody got a trick to alter the color and opacity for only the header and burger menu color?

    Reply
    • Anton

      background-color: rgba(255,255,255,0.4);

      /* hamburger text */
      span.mobile_menu_bar:before {
      color: #999999 !important; content: /61;
      }

  2. eric kindley

    Love this change to the mobile menu. Is there a css that would hide the sub menus and allow them to slide out when you need them?

    Reply
    • sezlee

      very good question. I have been looking for a way to achieve that in divi theme. did you find a solution?

  3. Harry

    Any idea how to customise that blue line appearing under the menu when the menu is open? I can’t figure that out.

    Reply
    • Stephen

      .et_mobile_menu {
      border-top: 0;
      }
      Should get rid of it, or use different css to style it .

  4. ben

    really appreciate the tip here. any ideas how i can make the mobile menu static and stick to top of window on phones and tablets?

    Reply
    • Stephen

      Should just be a case of
      @media (max-width: 980px) {
      #main-header {
      position: fixed !important;
      }
      }

  5. Mary

    Is there a way to make the mobile menu “push” the page content downwards while it is open? Here’s an example: http://protectingtallahassee.com/

    Reply
  6. Johan Linder

    Trying to get a another color (#dd0000) to the icon. Any ideas?

    Reply
    • Heath

      Hi Johan, Simply paste this code into the Custom CSS to the ePpanel of your Divi template and then change the colour from white to what ever you want:

      .mobile_nav::before { content:’Menu’; vertical-align:top; line-height:2.2em; color: #ffffff;}

      span.mobile_menu_bar::before { color: #ffffff;}

  7. Matthew Halliday

    Very nice tutorial, thanks Stephen.

    Only issue is that on my galaxy s6 it doesn’t seem to make the menu cover the full width of the screen.

    I have checked this in chrome as well and it seems that if I squeeze the window to its smallest size it also doesn’t work although at widths of 25% to 60%, it is working so it would probably work on a tablet/phablet:) .

    Any idea how to fix this?

    Thanks.

    Reply
  8. Bern

    Nice code. After this tutorial I have a question you might give any tip.

    I have a Centered style menu, but I would like a logo on left and hamburguer menu next to it , in mobile device (where it’s shown). Is this actually possible to achieve?

    thanks again for your work and share

    Reply
  9. Aaron Wilkins

    Does anyone know how to turn off a secondary menu in mobile, for the divi theme? If not, does anyone know how to edit the text shown?

    Reply
    • Sam

      @Aaron Wilkins –

      use this code in your CSS …

      #mobile_menu .social-menu {display:none;}

      where ‘.social-menu’ is the class given in your WordPress menu item’s class.

  10. Doug Johnston

    Your reply to Ben above about how to make the mobile menu bar static was SUPER helpful. But is there a way to make it not static only whe. The menu is expanded?

    The problem I’m having is my dropdown menu is long enough that it goes beyond the screen height on the phone. And when the mobile menu bar is static, it will not allow me to scroll to see the rest of the menu.

    I really like having the menu bar static at the top while browsing the site though! Really trying to find a way to make the two needs coexist.

    Thanks!

    Reply
  11. Brian Watt

    Fantastic tweak…thanks Stephen!

    Reply

Submit a Comment

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


Receive notifications about our new blog posts.


Don’t leave before entering to win an iPad Pro! It’s Free!

You may be too early for our Black Friday specials, but you can still enter our competition! Leave your details below and you could win an iPad Pro!

Great you've entered our giveaway! Only one step remaining! Please check your email and confirm it.