[BLACK FRIDAY DEAL] First 100 Memberships With 50% Discount! 👉Get This Deal
Mark Hendriksen Logo

Divi Mobile Plugin From Divi Engine

Mark Hendriksen | June 10, 2020 | 0 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

Did you know that 52% of internet traffic is coming from mobile devices? It is therefore very important to optimize your website for mobile. And it all starts with a great looking mobile menu.

You can customize your mobile Divi menu with CSS. Or you can do this with the plugin Divi Mobile from Divi Engine. This will give you tons of styling options for your mobile menu.

In this tutorial, I will be using this Divi plugin to customize the mobile menu. View the demo page on mobile or use your inspector tool and display it on the mobile view.

Step By Step Tutorial

By default, the sub-menu links are nested under the parent menu link (see the left image). As you can see in the image you will get a very long mobile menu.

With the mobile menu plugin, we can place those nested menu items under the parent menu item. And when you click on the parent menu item the sub-menu items will collapse out.

Another great feature of this plugin is that you can add any Divi module into the mobile menu. For example, I have placed social media and a button module under the mobile menu.

Collapsing mobile menu

 To follow this tutorial, you need to have the Divi Mobile plugin to be installed.

Step 1: Installing the Mobile Menu Plugin

To follow this tutorial, you need to have Divi and the Divi Mobile plugin to be installed.

Install and activate the plugin on your website.

Step 2: Mobile Menu Settings

Now that the plugin is installed you can go to Divi > Theme Customizer.

Under Divi Mobile you will find all the settings.

Divi mobile plugin settings

You can expand each toggle and find the settings that I have used for each tab.

You can expand each toggle and find the settings that I have used for each tab.

Menu Style and Settings

Menu style and settings

In this tab, you can choose which of your menus need to be the mobile menu. In case you have multiple menus. You will also find settings that will affect how your mobile menu will appear.

Another great feature is that you can change the mobile menu breakpoint. By default, this breakpoint starts at 980px.

Custom Header

The mobile menu that  I am using is the default Divi header. But you can create here a custom mobile header if you want too.

Choose Burger Menu

Mobile burger menu

Inject Layouts

Inject Layouts

Inject layouts is are a great feature of this plugin. You can create a layout and then insert this layout above or below the mobile menu.

It works as follow.

Go to Divi > Divi Library and create a layout by pressing the “Add New” button.

Give your layout a name and choose for Layout in the Layout Type field.

For my mobile menu I have created a social and a text module. I styled the text module as a button. I choose for a text module instead of a button module because the style of the button module often do not apply in dropdown menus.

For me it looks like this.

Social and button

When you have created your layout you can inject it in the mobile menu from the Inject Layouts tab.

Menu Appearance

Menu appearance

Sub-Menu Appearance


Let me know in the comments how you have styled your mobile menu.

You might also like…

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

Leave a Comment