How To Style The Divi Mobile Menu In 3 Easy Steps?

Divi Menu Styles: How To Style Divi Mobile Menu?

How To Style Divi Mobile Menu

Let's face it. We love Divi (most of us do) but Divi has its shortfalls—from Divi Builder isn't loading to the odd Divi mobile navigation when you use Divi right out from the box.

Everything looks perfectly fine when you choose the Divi default header setting, website logo located on the left and your menu text on the right. On the mobile version, your logo sits perfectly in the middle of the mobile header with a discreet hamburger menu on the right.

Now, what happens when you choose the other option—the option either centered above or centered inline? You will see the dreaded 'Select Page header and a too-small logo. That's the problem!

Here's the thing, while most people don't have this problem, we certainly do ... especially when our clients want 'special arrangements' on the top fold of the page.

If you are searching high and low on the Internet for the answer, today is your lucky day. A few lines of CSS code can transform the mobile menu experience for your visitors and making you or your website client happy.

Most of us just need a few quick CSS tweaks to get the Divi menu looking good on mobile.

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

The next step in this Divi tutorial is to remove the grey background and move the hamburger up, because they are controlled by the same selector. You can see that we’ve reduced the background transparency from (0,0,0,0.4) to zero. 

When moving the hamburger up (we chose -80px by the way), you also need to replace the space below it, so we'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.

While the setting above works for most Divi users, you can play around with these values until you are satisfied with the outcome.

.mobile_nav {
background-color: rgba(0, 0, 0, 0) !important;
margin-top: -60px;
margin-bottom: 40px;
}
.et_mobile_menu {
top: 80px !important;
}

How To Make The Logo Bigger In Divi?

Finally, we are in the last part of the Divi tutorial in styling the Divi mobile menu. Here, you are going to learn how to make the logo bigger—so it looks better on mobile view.

For your information, we had added a little margin at the top to give the logo a little room to breathe. While the line is absolutely optional, we recommend you to do so.

We had 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;
}
}

The Complete CSS Code To Style The Divi Mobile Menu

This is pretty much the summary before we end this Divi tutorial. If you are not a WordPress website developer, you might not have use any CSS tool, such as the Chrome Inspector. This tutorial is great especially when you are learning CSS and coding your WordPress website.

But of course, you can just copy and paste the CSS we had created below to style the Divi mobile menu layout.

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

Have a question about styling Divi mobile menu? Or maybe, you would like to request other Divi tutorials?

Leave a comment below and our editorial team would be happy to publish the tutorial for you!

Leave a Reply

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.

Related WordPress Tutorials

February 17, 2020
How To Improve WordPress Site Health Score?

Is the WordPress site health showing you an urgent error and rectifications required? This guide explains how to improve WordPress site health score.

Read More
February 16, 2020
5 Best Popup Plugins For WordPress To Build An Email List

Want to build an email list? Here are the top 5 and best popup plugins for WordPress websites. These are free and paid popup WordPress plugins for beginners.

Read More
February 15, 2020
How To Create Popup In Oxygen Builder?

If you are using Oxygen Builder, you might be wondering how to create popup in Oxygen Builder. This tutorial shows you exactly how to create a popup using Modal element.

Read More
February 14, 2020
Perfect Blog Post Template: 12 Steps To Create The Best Blog Post Layout

What is a perfect blog post template? WP Maven shares with you our custom blog post template that we use for our own website and company blog.

Read More
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram