How to Style the Divi Mobile Menu

by | Jul 28, 2019 | Divi tutorials | 0 comments

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.

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.


Submit a Comment

Your email address will not be published. Required fields are marked *