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!
Thanks for the CSS. I have a site with a transparent mobile menu header and cannot figure out how to give a different background color to the drop down as well as the color of the interior page titles/links. Any help would be great – thanks!
https://share.getcloudapp.com/o0ugyQg1
Hey thank you for this tut, I want to move the mobile menu to the left with the logo in the center and the search icon to the right. Is that possible?
Hey! I have the same problem! have you solved it? I created a global layout on Divi builder but on mobile it doesn’t work.
https://www.divicio.us/tutorials/5-simple-css-snippets-to-customize-divi-mobile-menu-bar/
Dear Stephen,
Many thanks for the CSS code for improving the “mobile menu” on Divi !
May I ask you how to close the “mobile menu” if clicking somewhere on the page (but not on a link at the page) ?
Thank you.
If somebody wants to change the text-color of the active sections in the mobile menu, here is my solution.
.et_mobile_menu li.current-menu-parent > a {
color: #ed6907 !important;
}
.et_mobile_menu li.current-menu-item > a{
color: #ed6907 !important;
}
.et_mobile_menu .current-menu-ancestor > a{
color: #ed6907 !important;
}
Thanks Stephen. may be of help for designs
Fantastic tweak…thanks Stephen!
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!
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?
@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.
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
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.
Trying to get a another color (#dd0000) to the icon. Any ideas?
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;}
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/
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?
Should just be a case of
@media (max-width: 980px) {
#main-header {
position: fixed !important;
}
}
Any idea how to customise that blue line appearing under the menu when the menu is open? I can’t figure that out.
.et_mobile_menu {
border-top: 0;
}
Should get rid of it, or use different css to style it .
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?
very good question. I have been looking for a way to achieve that in divi theme. did you find a solution?
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?
background-color: rgba(255,255,255,0.4);
/* hamburger text */
span.mobile_menu_bar:before {
color: #999999 !important; content: /61;
}