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

2021-10-04 | Divi, Freebies, Tutorials | 64 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.11.1

Video tutorial: Create a Global Header With the Divi Theme Builder

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 once a week. 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;
margin-top:5px;
color: #333;
font-size:16px;
}

/* Text left of hamburger in Divi 3 */

#et_mobile_nav_menu:before  {
content: 'MENU';
position: absolute;
right: 33px;
bottom:30px;
color: #333;
font-size:16px;
}

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.

Fix overlapping when displaying search icon and/or cart icon

Are you displaying the search icon and/or the shopping cart icon in the mobile menu? Add this CSS snippet to fix overlapping issues with the “MENU” text. If you use a wide logo and two icons you might want to consider placing the logo in a separate row above the menu, to avoid overlapping or squeezing.

/* Fix overlapping for the Divi Theme Builder */

.et_mobile_nav_menu {
	margin-left:50px !important;
}

/* Fix overlapping for the Divi Customizer */

#et_mobile_nav_menu {
	margin-left:25px;
}

/* Make mobile search field cover MENU text - change #fff if needed */

@media (max-width: 980px) {
#main-header .et-search-field {
background-color:#fff;
}
}

 

The result:

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. Save.

Bonus: Change the close (X) icon color

Add this little CSS snippet to change the color of close icon.

/* Change X icon color - change #000 to your desired color */

.mobile_nav.opened .mobile_menu_bar:before {
color: #000;
}

 

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:0;
}

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:0 !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.

A fix if the full width mobile menu is not center-aligned

The CSS snippet above works flawless if you use the default Divi header or if you use the Theme Builder header with the default 80% width in the row that contains the menu module.

However, if you use the Theme Builder and change the width of the row containing the menu, the margin-left value needs to be adjusted accordingly.

If you for example use a 90% row width, yo can use this snippet instead:

/* Make mobile menu fullwidth with 90% row width */

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

If you use custom padding in the row that contains the menu module or if you use padding or margin in the menu module, you might need to to tweak the margin-left value further. Share your link in the comments below if you get stuck and I’ll see what I can do.

The result:

6. Make the mobile menu full height

Update: To avoid a delay when closing the mobile menu, I’ve addd an extra snippet that removes the collapse animation.

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 !important;
min-height: -webkit-fill-available;
padding-top:50px !important;
}

html {
height: -webkit-fill-available;
}

/* Remove the animation to avoid delay */

.mobile_nav.opened .et_mobile_menu {
display:block !important;
}

2. Save.

Code update 2020-06-02: I added height: -webkit-fill-available to fix a well-known bug related to full viewport height design in mobile devices. Cheers to Mat Smith for sharing this fix!

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 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;
margin-top:5px;
color: #333;
font-size:16px;
}

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

/* 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:0;
}

/* 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:0 !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 !important;
min-height: -webkit-fill-available;
padding-top:50px !important;
}

html {
height: -webkit-fill-available;
}

/* Remove the animation to avoid delay */

.mobile_nav.opened .et_mobile_menu {
display:block !important;
}

2. Save.

The result:

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

More resources for a better mobile menu

Here are two affiliate links to 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. And make sure to check out our free Divi video tutorial – 100% free.

 

Free Divi Layout

Related posts

64 Comments
  1. Hi Victor,
    Is there an easy way to make the MENU text clickable to open the menu?

    Thanks,

    Vic

    Reply
    • Hi Vic (nice name by the way)!

      That’s a good idea. I did some testing but I couldn’t come up with a solid solution. But if I solve it, I’ll add it it to this post and ping you.

      Reply
  2. How to increase the menu font and change background color on the mobile view

    Reply
    • Hi Augstine! If you use the Divi default menu, just go to Divi > Theme Customizer > Mobile Styles > Mobile Menu. Here you can choose your Text Color and Background Color.

      If you use the Theme Builder to create a global header, you can just use the background and font settings under the Design tab in the Divi builder when creating the menu.

      I hope that answers your question!

      Reply
  3. Thanks! This is awesome. Question: is there a way to make the transition quicker when closing the menu (hitting the ‘x’). It seems to have a .5 second delay.

    Reply
    • Thanks for the feedback Ken! It seems to be the “min-height:100vh” that’s causing the delay. Using “height” instead of “min-height” could reduce the delay, but that could also cause cropping of more extensive menus. So the best fix is probably to remove the height setting altogether.

      Reply
  4. I have tried to insert the CSS code to change the collapse icon to X when open.

    Instead it shows other icon

    Reply
    • I checked your website (nice work by the way!) and I see the X icon in both Safari and Chrome on my iPhone. Maybe it was a cache issue?

      Reply
  5. all features are greet man . but 1 things can be make its 100% .

    Please add transition because when full mobile menu open and i click cancel its behave like statue

    Reply
    • Thanks for the feedback Ayaan. I understand what effect you are referring to. The only way I’ve found to remove the delayed transition is to remove the full height snippet:

      .et_mobile_menu {
      min-height:100vh !important;
      }

      However, I will update this post and ping you if I find a way to make the mobile menu full height without adding the extra delay when closing it.

      Reply
      • Hi Victor!
        First of all thank you for sharing this awesome header.
        I think what Ayaan meant is when clicking the hamburger menu in mobile view, the menu items pop up with no transition (like in the default divi menu after clicking, the items “scroll down” smoothly) Is there any way to change this? I’m thinking some kind of “-webkit-transition” but im a total css noob.
        Cheers

        Reply
        • Thanks Mate! I see what you are looking for and it sure sounds like a nice design addition to the Divi mobile menu.

          I messy way of achieving this would be to set separate css classes to each menu object, and add animations with a slightly increased delay for each menu object, for example animation-delay: 100ms; for menu object number 2, animation-delay: 200ms; for menu object number 3 etc. And finally add media queries to avoid the effect on the desktop menu.

          But that would be a hassle each time you want to add a new menu object.

          A plugin like “Divi Mobile” from Divi Engine might be a better option. I haven’t tried it my self but it seems to have some animation effects (and much more). Check it out at: https://www.youtube.com/watch?v=HjxeW2SN1Hc

          Reply
    • Hi Ayaan! I’ve updated the post with a new snippet that removes the lag when you close the full height mobile menu now. Check it out! 😊

      Reply
  6. Thank you four this. These seemingly simple changes make the menu look so much better.

    Reply
  7. Thank you for the great tutorial! Is there any way to change the hamburger icon and x to black and keep the new icon from overlapping with the search icon?

    Reply
    • Thanks Lukas! Try to play around with the CSS snippets below. Adjust the color and the margin to fit your design. And why not update to the latest Divi version (3.7) and use the new responsive features to see how it looks in different mobile sizes? I’m lovin’ it! 🙂

      /* Change X icon color - change #000 if needed*/
      .mobile_nav.opened .mobile_menu_bar:before {
      color: #000;
      }

      /* Move mobile search icon to the left - change 55px if needed */
      @media (max-width: 980px) {
      #et_top_search {
      margin-right:55px;
      }
      }

      /* Make mobile search field cover MENU text - change #fff if needed */
      @media (max-width: 980px) {
      #main-header .et-search-field {
      background-color:#fff;
      }
      }

      Reply
  8. All the codes that you have provided worked like a charm on the newest version of Divi! Just wanted to say thank you for your time and effort.

    Reply
    • Thanks Parham, that’s nice to hear! 🤗

      Reply
  9. Great great post, love the way the logo are in the mobilemenu!

    Reply
  10. Great post, just a question, I use sub category or more, how can I change your code to only display the level 1 and clic to open sub category ?

    Thanks

    Reply
  11. I cannot work out how to import the .json file into the Global Header. Am I looking to do this in the wrong place?

    Reply
  12. Hi Glen! Try this:

    1. Go to Divi > Theme Builder
    2. Click “Add Global Header” (or click the pen icon if you already have one)
    3. Click the purple ball with the three dots to open the Visual Builder menu
    4. Click the arrow up/arrow down icon for Portability
    5. Click “Import”
    6. Upload the .json file.
    7. Edit, save and exit.
    8. Click “Save changes” in the Theme builder dashboard (if needed)

    Let me know if it works out!

    Reply
  13. Hi,

    Great solution, would love an option to 100% cover the page, but still make the menu icon, logo and cart icon visible.

    Any idea how to do that? Also, the -10vw gives a margin on the right side for me, making it not fully cover the page.

    Reply
    • Thanks Ernst! The hamburger icon, logo and cart icon should still be visible if you use the snippets from this post (but you will probably need to fine tune the positioning of the search icon and the cart). Have you changed the z-index?

      Do you have a link to the website so that I can have a look at the margin? It can differ in some cases depending on how the menu is built.

      Reply
  14. Excellent content! Very simple tips.

    Another “issue” that could be useful to solve on mobile is to show the menu items already expanded, any clue about this?

    Regards!

    Reply
  15. Thanks Eduardo! I see what you are going for but I don’t have a solution for that right now. Maybe a niche plugin like Divi MadMenu or Divi Mobile can do the trick?

    Reply
  16. Hi! I’m wondering how to make it full height only displaying the menu items and X, if you don’t want to have the logo etc, when fully open, i mean only the menu links and the x displaying!

    I’m also wondering how you change font and size, remove the lines between the links and adjusting heights in the menu.

    Thank you! Sorry for the long question.. I’m learning!

    Reply
  17. Hi Kalle! No problem, it’s always nice to hear from a fellow Swede! 😉

    There’s no pretty solution for hiding the logo when the mobile menu is expanded, but you can try this quick and dirty css hack:

    .mobile_menu_bar {
    z-index: 9999;
    }

    .et_mobile_menu {
    margin-top:-60px;
    }

    This works when I tested it on the demo menu (made with the Theme Builder) at: https://divimundo.com/en/demo-a-better-divi-mobile-menu/

    Play around with the -60px value to nudge the mobile menu above the logo.

    Font size, line color (set it to transparent to hide the lines) and padding can be set in the menu module settings when you edit the header in the Theme Builder. I recommend that you use the Theme Builder and not the old school Theme Customizer menu since the latter has limited settings. Here’s a neat overview: https://www.elegantthemes.com/blog/divi-resources/an-overview-on-divi-header-types-tutorials-freebies

    Reply
    • Tack för kaffet! “Thank you for the coffee” That function was really nice! But I have some trubles.. It’s the X that gets hidden and doesn’t shows up when the mobile menu is open in full screen.. Do you know any dirty hack that laser cuts the X through the menu or something when activated? 😁😄

      Big thanks for the other information as well!

      Reply
      • Try replacing the code above with:

        .mobile_menu_bar {
        z-index: 99999 !important;
        }

        .et_mobile_menu {
        margin-top:-60px;
        }

        Does that work better? Skål!

        Reply
        • Yes smooth like butter! 🧈 Pleased! Thank you! Have a nice helg kung!!

          Reply
        • Thank you very much! You are very clever! You saved me! : )

          Reply
          • Thanks Berci, I’m glad to hear that! 🤓

  18. Great! Many thanks from Italy!!!

    Reply
  19. Hi 🙂
    I have two questions, the tag menu can be clickable as hamburger menu as well? Because otherwise can be that people are clicking “menu” but is not showing as long as you are not clicking the hamburger menu.

    Second question is about “5. Make the mobile menu full width”. My menu on mobile I putted in the middle of a row made from 3 column. If I add that code, menu is going on right (side blank of screen) is it any way to make it full width with the hamburger menu in the middle of 3 column?

    thanks a lot.

    Reply
    • Hi Fil! Good questions! You can use this code to place a clickable “Menu” text AFTER the hamburger icon: https://divinotes.com/adding-text-side-divi-mobile-hamburger/

      I played around a while to put the menu text to the left of the hamburger icon and still make it clickable, but I fell short since it messes up the actual hamburger icon. I think you can achieve this effect with the plugins Divi Toolbox or Divi Mobile though.

      Regarding question #2, the full width code works regardless of how many columns you use. However, changing the row width and/or the row padding in the Theme Builder header layout can move the menu out of line. Play around with the 100vw and -10vw values in the CSS to nudge it right, or post a link in the comments and I can have a look.

      I’m sorry that I could’t help you all the way.

      Reply
  20. Thanks for the great tutorial. As someone who can barely write or read code it was really easy to follow and implement on my site. I played around with some of the settings to create a fullscreen dropdown menu on both desktop and mobile.

    Currently, the menu text is centered at the top, but I would like it to be centered in the middle of the page. Is there an easy way to do this for all devices? I have been playing around with some settings, but can’t seem to get it to work.

    Thanks in advance 🙂

    Reply
        • Try this CSS:


          .et_mobile_menu {
          display: inline-flex;
          flex-direction: column;
          justify-content: center;
          position: fixed;
          margin: 0;
          min-width: 100vw;
          }

          Try to add !important if it doesn’t work.

          Reply
          • Thanks a lot for your response. Much appreciated! Your snippet of code is definitely a step in the right direction 🙂

            Only issue I’m running into now is the menu already being open when you land on the page… Plus I guess it puts the first word of the menu in the middle which doesn’t look too bad on desktop, but looks kind of weird on mobile as the screen is longer.

  21. Great Content!

    Is there any way to disable scrolling when the mobile menu is open?

    Thanks for all.

    Reply
  22. There’s a 1 second delay when I close the mobile menu. Any idea how to make the menu close instantly?

    Reply
    • Hi Brian,

      The delay is a consequence of the min-height css. I haven’t found a way to get rid of the lag when using the full-height layout, so my only solution is to remove the height related CSS from the mobile menu. Sorry, but that’s my best answer at the moment.

      Reply
    • Hi Bryan! I’ve updated the post with a new snippet that removes the lag when you close the full height mobile menu now. Check it out! 😊

      Reply
  23. Thanks Victor very helpful, bravo! can you put a separator line between the various menu items, perhaps centered?

    Reply
  24. Thanks Davide! Sure, play around with this CSS in the Theme Customizer:


    .et_mobile_menu li a {
    border-bottom-color:#666;
    border-bottom-width:2px;
    }

    If you want to reduce the width of the line and make it center aligned, you can try to add:


    .et_mobile_menu li a {
    width:70%;
    margin:auto;
    }

    But be careful, since the 70% width could crop long link texts in the menu.

    Reply
  25. Thanks very kind, it worked

    Reply
  26. Victor you are always very kind, can you tell me what to add to have a border around the menu always from mobile? then color and px change thanks

    Reply
    • Hi Davide! I’m not sure if I grasp what you are looking for, but you could try to play around with this CSS:

      .et_mobile_menu {
      border: solid 3px #333;
      }

      You could also try to play around with the border settings in the Theme Builder.

      Reply
  27. thanks a lot

    Reply
  28. Hi, can you do something to make it open slower? Thank you very much

    Reply
    • It seems like the mobile menu animation is fired by jQuery so I’m afraid that I don’t have an easy solution for that. If I find a way, I’ll let you know.

      Reply
  29. Hello,
    Awesome tutorial ! But here is my problem :
    My menu has too many items and has no overflow, so the user cannot see the entire menu.
    Can you give me a CSS code that allows user to scroll into the menu please ?

    Thanks !

    Reply
  30. any advice on how to make the menu collapsible?
    tia

    Reply

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.