How to Style the Divi Mobile Menu

In this tutorial I will be covering how you can style the Divi mobile menu. By default, you can only choose a couple settings for the mobile menu.

This is the mobile menu we are going to make:

Styling the divi mobile menu

You can find a live demo here:

This demo is a part of my guide how to create a custom Divi header. If you like to make a custom header like this you can start by following this tutorial.

Step 1: Adding the icons to your menu

To add the icons in your menu, follow this tutorial How to add icons in your Divi menu

Step 2: Styling the mobile menu

Add the following CSS code in Divi > Theme Options > CSS or add it in your Divi child theme CSS file.

.et_mobile_menu {
    border-top: 3px solid #13635b;
    background: #29bdae;
	padding: 1% 5%;

.et_mobile_menu li a,
.et_mobile_menu li ul li:last-child a {
    border-bottom: 1px solid #13635b !important;
    color: #ffffff !important;

.et_mobile_menu li:last-child a {
    border-bottom: 0px solid #13635b !important;

.et_mobile_menu .fas {
    color: #13635b !important;	
	padding-right: 7px;

On line 2 you can change the top border color.
On line 3 you can change the background color.
On line 10 you change the text color.
On line 14 you can change the bottom border color.
On line 18 you can change the icon color.

1 thought 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.


Leave a Comment