{"id":18290,"date":"2020-06-10T16:53:51","date_gmt":"2020-06-10T14:53:51","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=18290"},"modified":"2025-04-24T06:40:00","modified_gmt":"2025-04-24T04:40:00","slug":"divi-mobile-plugin-from-divi-engine","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/divi-mobile-plugin-from-divi-engine\/","title":{"rendered":"Divi Mobile Plugin From Divi Engine"},"content":{"rendered":"\n

Did you know that 52% of internet traffic<\/a> 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.<\/p>\n\n\n\n

You can customize your mobile Divi menu<\/a> with CSS. Or you can do this with the plugin Divi Mobile from Divi Engine<\/a>. This will give you tons of styling options for your mobile menu.<\/p>\n\n\n\n

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

\n\nSee Demo<\/a>\n\n<\/div>\n\n\n
<\/div>\n\n\n\n

Step By Step Tutorial<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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

\"Collapsing<\/figure>\n\n\n\n

 To follow this tutorial, you need to have the Divi Mobile plugin to be installed.<\/p>\n\n\n\n

Step 1: Installing the Mobile Menu Plugin<\/h3>\n\n\n\n

To follow this tutorial, you need to have Divi<\/a> and the Divi Mobile plugin<\/a> to be installed. <\/p>\n\n\n\n

Install and activate the plugin on your website.<\/p>\n\n\n\n

Step 2: Mobile Menu Settings<\/h3>\n\n\n\n

Now that the plugin is installed you can go to Divi > Theme Customizer.<\/p>\n\n\n\n

Under Divi Mobile you will find all the settings.<\/p>\n\n\n\n

\"Divi<\/figure>\n\n\n\n

You can expand each toggle and find the settings that I have used for each tab.<\/p>\n\n\n\n

You can expand each toggle and find the settings that I have used for each tab.<\/p>\n\n\n\n

Menu Style and Settings<\/h3>\n\n\n\n
\"Menu<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

Another great feature is that you can change the mobile menu breakpoint. By default, this breakpoint starts at 980px.<\/p>\n\n\n\n

Custom Header<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

Choose Burger Menu<\/h3>\n\n\n\n
\"Mobile<\/figure>\n\n\n\n

Inject Layouts<\/h3>\n\n\n\n
\"Inject<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

It works as follow.<\/p>\n\n\n\n

Go to Divi > Divi Library and create a layout by pressing the \u201cAdd New\u201d button.<\/p>\n\n\n\n

Give your layout a name and choose for Layout in the Layout Type field.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

For me it looks like this.<\/p>\n\n\n\n

\"Social<\/figure>\n\n\n\n

When you have created your layout you can inject it in the mobile menu from the Inject Layouts tab.<\/p>\n\n\n\n

Menu Appearance<\/h3>\n\n\n\n
\"Menu<\/figure>\n\n\n\n

Sub-Menu Appearance<\/h3>\n\n\n\n
\"Sub-menu-appearance\"<\/figure>\n\n\n\n

Let me know in the comments how you have styled your mobile menu.<\/p>\n\n\n\n

You might also like…<\/h3>\n\n\n\n