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:

You can find a live demo here:VIEW DEMO

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.