How to Style the Divi Mobile Menu

In this step-by-step tutorial, I will be covering how you can customize the Divi mobile menu. At the end of this tutorial, you will know where to find all the customization options in Divi for the mobile menu.

You can build a menu in 2 ways, the default menu or a custom menu in the Theme Builder.

  • How to customize the default Divi mobile menu
  • How to customize the Divi mobile menu in the Theme Builder

How to customize the default Divi mobile menu

If you are using the default Divi menu, you can follow these steps to customize the mobile menu.

The default Divi menu is limited in customization options. I will provide additional CSS snippets to customize it further. You can also consider building a custom menu in Divi > Theme Builder.

How to customize the Divi mobile menu text colors

Go to Divi > Theme Customizer > Mobile Styles > Mobile Menu.

Under Text Color you can change the color.

Replace mobile menu text color in Divi

As you can see in the image, the hamburger icon color changes as well. To prevent this, follow the next step.

How to change the hamburger icon color

For this, we need a little bit of CSS code. Go to Divi > Theme Options > CSS and place the following snippet.

.mobile_menu_bar:before {
    color: #000000;
}

Replace the color code with yours.

How to change the mobile menu font size

You can use this snippet to customize the mobile menu font size:

.et_mobile_menu li a {
    font-size: 14px;
}

How to change the mobile menu background-color

Go to Divi > Theme Customizer > Mobile Styles > Mobile Menu.

Under Background Color you can change the color.

Background color mobile menu Divi

The issue with this is that it also changes the background top bar color.

To change the top bar background color, you can use this snippet:

@media only screen and (max-width: 980px) {
#main-header {
    background-color: #ffffff;
}}

How to hide the Divi mobile logo

If you want to hide the logo for the mobile menu then go to Divi > Theme Customizer > Mobile Styles > Mobile Menu.

And enable Hide Logo Image.

Hide the logo in the mobile menu in Divi

How to customize the mobile menu in the Theme Builder

If you are using a custom menu in the Theme Builder, you can customize the mobile menu in the menu module.

For all of the following settings, you need to go to Divi > Theme Builder > Global Header 

Then open up your menu module and go to the design tab.

From this point, you can follow these topics.

Mobile text customizations for the Theme Builder

Go to Menu Text, here you can change all the settings for the mobile text. Just switch to the mobile tab.

I will give you an example of the text size for mobile.

You can do this for all of the following:

  • Active link color
  • Menu font
  • Menu text color
  • Menu text size
  • Menu letter spacing
  • Menu line-height
  • Menu text-shadow

Mobile menu backgound color in the Theme Builder

You can find the mobile menu background color under Dropdown Menu.

Mobile menu background color in the Theme Builder

Customize the hamburger icon

Under Icons, you can change the hamburger icon color and size.

Customize the hamburger icon color and size in Divi

Customize the mobile logo

Under Sizing > Logo Max Width, switch to mobile, and you can set a max-width value to make your mobile logo smaller. 

Change the mobile logo size in Divi

You might also like…

If you want more advanced customizations, then you can follow any of these tutorials:

3 thoughts on “How to Style the Divi Mobile Menu”

  1. Thanks, I was looking everywhere for a solution to this problem. I set my header background to transparent for desktops but needed to change the background color to white and change the text color so that the menu items could be seen on a mobile device. The above CSS did even better, allowing me to completely customize my mobile menu. Thanks for sharing.

    Reply
  2. Help please oh please! I need to move the Divi drop-down menu upwards to be closer to the Nav text link. I’ve searched everywhere for a code snippet and really hoe you can kindly help. Yours hopefully, Chris (UK).

    Reply

Leave a Comment

2 Shares
Share1
Pin1
Tweet