I’m not gonna lie. I’m not a fan of the Divi mobile navigation out of the box, with one exception.
If you used the ‘default’ header setting, with your logo on the left and your menu text on the right, it looks just fine. Your logo sits nicely in the middle of the mobile header with a discreet hamburger on the right.
Choose either of the other options – centered above or centered inline – and you’ll see the dreaded ‘Select Page’ header and a too-small logo. As someone who rarely uses the default option, this is a problem.
The good news is that we don’t have to live with it. A few lines of CSS can transform the mobile menu experience for your visitors.
Before we divi into the tutorial, I’d like to give a shout out to a plugin that’s worth investing in if you’ve got an ambitious design for your header area. I particularly like the Mighty Menu & Header Maker (or MMHM for short), which allows you to build your own header for both desktop and mobile, using the Divi builder. It gives you a hamburger menu to play with, custom breakpoints and a range of options for the fly-out menu. The rest is down to your imagination.
However, most of us just need a few quick CSS tweaks to get the Divi menu looking good on mobile. By the way, if you prefer to learn by watching, head straight down to the video tutorial at the bottom of this post, with the complete code below it.
In this tutorial, we’re going to do 3 things to the mobile menu:
- Remove the Select Page bar
- Move the hamburger menu up
- Enlarge the logo
REMOVE THE SELECT PAGE BAR
Using the inspector tool (see video tutorial below), identify and hide the words, ‘Select Page’, by adding the following code to your Divi Theme Options Custom CSS area. (You’ll see throughout, I’ve had to use the !important tag in places, to override the native Divi styling).
.mobile_nav .select_page {
display: none !important;
}
MOVE THE HAMBURGER MENU UP
Now, we’re going to remove the remaining grey background and move the hamburger up, because they are controlled by the same selector. You can see that I’ve reduced the background transparency from (0,0,0,0.4) to zero.
When moving the hamburger up (I chose -80px), you also need to replace the space below it, so I’ve added an 80px margin. You also need to add some space above the mobile dropdown menu to make sure it doesn’t cover your logo.
You can play around with these values until you are happy.
.mobile_nav {
background-color: rgba(0, 0, 0, 0) !important;
margin-top: -60px;
margin-bottom: 40px;
}
.et_mobile_menu {
top: 80px !important;
}
MAKE THE LOGO BIGGER
Finally, we’re going to make the logo bigger. You’ll see I’ve added a little margin at the top to give the logo a little room to breathe. That line is optional.
I’ve also used a media query to make sure that these changes only take effect on tablets and below.
You can find a full list of Divi media queries here.
@media all and (max-width: 980px) {
#logo {
margin-top: 20px;
max-width: 70% !important;
}
}
WATCH THE VIDEO TUTORIAL
GRAB THE WHOLE CODE
If you haven’t used a css tool, like Chrome Inspector, then this exercise is a great place to start. Of course, you could just copy and paste my CSS but I’d encourage you to give each step a try!
/*STYLE MOBILE MENU*/
.mobile_nav .select_page {
display: none !important;
}
.mobile_nav {
background-color: rgba(0, 0, 0, 0) !important;
margin-top: -60px;
margin-bottom: 40px;
}
.et_mobile_menu {
top: 80px !important;
}
@media all and (max-width: 980px) {
#logo {
margin-top: 20px;
max-width: 70% !important;
}
}
Want to share your CSS success or ask a question? Head over to our friendly Facebook group where we answer your web, design or marketing questions.
Thanks! This worked really great for me . It solved my issue since there is no option at divi for change header style only at mobile menu.
Btw , I would just add a margin-left: -30vw !important; to your solution if you want to have the logo “left-aligned” as it would be if header style was default.
So last media query would be:
@media all and (max-width: 980px) {
#logo {
margin-top: 0px;
max-width: 70% !important;
margin-left:-30vw !important; /* left align logo */
}
added to the code with @Renzo Margin left and I also added fixed scrolling to the logo
to it will put the Logo on the left on hamberger menu on the right with fixed scrolling
thanks to everyone for the code BTW made my website awesome!
/*STYLE MOBILE MENU*/
.mobile_nav .select_page {
display: none !important;
}
.mobile_nav {
background-color: rgba(0, 0, 0, 0) !important;
margin-top: -60px;
margin-bottom: 40px;
}
.et_mobile_menu {
top: 80px !important;
}
@media all and (max-width: 980px) {
#logo {
margin-top: 0px;
max-width: 70% !important;
margin-left:-30vw !important; /* left align logo */
position: fixed;
}
}
I love this post! Thank you! I actually would like exactly this look on my mobil version but can’t seem to get the logo to show. Do you have any idea why?
Thank you!
Great tutorial, thanks. Is it possible to have the burger icon on the left? And however over page when scrolling?
To put it on the left you could add:
.mobile_menu_bar { left:5px !important; }
Thanks for the help!
Great. worked like a charm! Thank you so much.
Great bit of code that does exactly what is needed – thank you!
This is really helpful, thank you! I’m so glad to get rid of that ugly ‘select page’ menu view.
Sorry if this is a silly/obvious question, but, how can I make the logo and hamburger bigger?
I tried playing around with the max-width bits in the code but it didn’t make any difference.
Mary – I was able to make the hamburger bigger with this code:
.mobile_nav.opened .mobile_menu_bar:before {
font-size: 59px!important;
}
.mobile_menu_bar:before {
font-size: 59px!important;
}
I also made the hamburger turn into an X when open, which adds one more line of code, so my actual code is:
.mobile_nav.opened .mobile_menu_bar:before {
content: “\4d”;
font-size: 59px!important;
}
.mobile_menu_bar:before {
font-size: 59px!important;
}
This is GREAT, thank you! The only thing I haven’t figured out is where my woocommerce “cart” button has gone, and how to get it back… Any ideas?
This is GREAT, thank you! I chose centered for my new site redesign and was so glad to find this fix! The only thing I haven’t figured out is how to bring back the woocommerce “cart” button in mobile view (I notice it disappears on your site also). Let me know if you discover a fix for this! And thank you again 🙂
This worked perfectly. I’m a newb who’s been fumbling around trying to fix this unsightly issue for a long time. You’re a lifesaver. —xo