Divi Plugin Highlight – Mobile Menu Customizer

Posted on August 19, 2017 by 16 Comments Reader Disclosure Disclosure: If you purchase something after clicking links in the post, we may receive a commission. Thank you for the support!

Divi Plugin Highlight – Mobile Menu Customizer
Blog / Divi Resources / Divi Plugin Highlight – Mobile Menu Customizer

Have you ever wanted to style your mobile menus independently from your desktop menus in Divi? Divi’s menu system includes settings for mobile that places the menu within a hamburger icon, but what if you wanted to use a different header for mobile, add new styling, or even animate the menu’s opening or closing actions? You can do this with a third-party plugin called Mobile Menu Customizer.

In this plugin highlight we’ll take a look at Mobile Menu Customizer from Divicio.us and see what it can do and the effect it would have on your website’s loading time. The images in these examples were taken from Unsplash.com.

Installing Mobile Menu Customizer

You must first unzip the downloaded file. Within it you’ll see three files:

  1. Changelog
  2. Divi-mobile-menu-customizer

Upload and activate the divi-mobile-menu-customizer file.

Within the plugin menu in the dashboard is a new link called DMMC Plugin License. Click this and enter your license key in order to receive updates.

New Theme Customizer Settings

A new menu item is added to the Theme Customizer called Mobile Menu Customizer. Selecting it automatically displays your website in a mobile view using a mobile menu. You can also select tablet mode. Within the menu are seven menus.

Menu Header Settings

Menu Header Settings include settings for the header background color, text and icon color, icon format, type text for open and closed menu, text size, icon size, menu bar font style, and the dropdown menu top offset.

I’ve changed the header background color and text and icon colors. I’ve selected to show the text and menu icon, entered the text I want it to display, and selected bold and italic font styles. I’ve left the text and font sizes at their defaults. I could also show the icon on the left and text on the right, just the text, or just the icon.

For the open menu I’ve entered text to display and selected to show an X icon. I’ve also set the dropdown menu top offset to 5 just to show that it is adjustable.

Menu Settings

Menu Settings include fixed menu, fullwidth (in portrait mode), padding, top bar background color, text settings, and border settings. I like that it automatically shows you the website in portrait mode, but I didn’t see a way to view in landscape mode, so I’m not able to see the effect of the full-width menu.

I’ve set it to fixed so the menu remains on screen on scroll. I’ve set the top bar and menu background colors, and centered the text. You can see that I’ve set the opacity to show just a little bit of the background.

I’ve also increased the spacing and font size, font colors, and adjusted the border width, radius, and color. In this second example I’ve adjust the top border radius and right and left border width. It would be helpful if the small sliders had a button to take them back to their default settings.

Menu Item Settings

The Menu Item Settings apply to the individual items within the menu. Adjust the margins, height, background color, border width, border radius, and border color.

In this example I’ve increased the margins to 4, set the item height to 22, set the border width to 5, and the border radius to 8 to give it a slightly rounded corner.

Submenu Settings

Submenu Settings allow to make the submenu collapsible, change the colors of the background and links, and adjust the font size and style. I’ve adjusted the colors, increased the font size from 14 to 16, set it to italic, and made it collapsible.


Shadow allows you to control the in and out direction, X and Y offset, blur, spread, and color. I’ve set this one to outset with an X-offset of 20, Y-offset of -17, a shadow blur of 5, and spread of 10. I’ve also darkened it to make it stand out.


Gradients can be applied to the menu header and the menu itself. It gives you three colors with a stop location for each. You can also change the angle.

This is a look at the menu gradient.

You can also display a different gradient for the menu and menu header. Here’s the same gradient with a different angle and stop locations for the menu header.


Animations provides two drop-down lists – one for the open animation and one for the closing animation, with 10 animations each. Animations include fade, shrink, zoom, flip, etc. You can use the in and out animations in any combination you want.

This one uses Fade In Right and Fade Out Left.

This one uses Grow and Shrink.

This one uses Flip In X and Flip Out Y.

This one uses Lightspeed In and Fade Out.

Using the Settings Together

Up to this point I’ve highlighted each menu item separately so you can see what they do. Here are a few examples of how they look when they’re combined.

In this example I’ve adjusted the menu background and link colors, swapped the menu icon for text, changed the color of the bar, adjusted the menu item height, provided a top border, set the submenu fonts to bold and italic, set a submenu color, and provided a shadow using inset and adjusted the settings so that it just shows.

This one uses an offset border width with a radius of 12 to round the corners. The border color is red. I’ve increased the font size and width to the max. The background is black with an opacity of .87. The header is black with an opacity of .55. The menu link is red to match the dropdown menu border.

This example increases the font sizes and uses various shades of red gradients for both the header and dropdown menu. I’ve set the top bar color to a dark shade of red to match. I’ve also adjusted the menu height.

This example uses a dropdown menu top offset of 100 and is not fixed. The letter spacing and font size are maxed out. The menu border radius is set to 50 and border width is set to 5. The text is right-aligned. The background is white with an opacity of 30.

The menu item border width is 1 and the radius is 25. I’ve used the same black background but with an opacity of .08 and the border opacity is .12.

The submenu settings have a background opacity of .55 and a white font. The shadow stands out just a little using the same black with an opacity of .17. The shadow offset is set to 16 for both x and y. I’ve placed a gradient in the header using black with various levels of shade and opacity.

A couple of small adjustments changes the look completely. This one uses bold fonts that are centered and a background opacity of .90.

Here’s a look at the menu in tablet mode. It’s a good idea to switch between the modes as you make your customizations.

Update – Two New Settings

Before this article published, two new settings were added: Background Image and Menu Icons.

Background Image Settings

Background Image Settings allow you to upload an image to place behind the drop-down menu. You can choose its size, position, if it repeats, and how it clips for the border.

Menu Icon Settings

Menu Icon Settings allow you to choose an icon for each menu item, and adjust the size and location.

Mobile Menu Customizer PageSpeed Test

Since the plugin is rendering a lot of effects with all of the features enabled I decided to test it using PageSpeed Insights. With the plugin disabled my test server gets a score of 70. I’m using no minifying or cache plugins.

With plugin enabled the score went from 70 to 69. I tried the test twice and got the same result both times. It’s worth 1 point to have this level of customizations.


You can install the plugin on unlimited websites for both you and your clients. It includes lifetime updates and 6 months of support. Documentation is provided as videos in the developer’s website.

Final Thoughts

Mobile Menu Customizer adds a lot of features to style the mobile menu. I found the customizations easy to use. I wanted to see menu icons included and now they have been. I would like to see a few features for the logo. I would like to see the customizations available for desktop menus as well. The plugin does not work with Extra.

The customizations look great and there are a lot of settings to choose from. I like that you can style the header and menu independently. If you’re interested in customizing your mobile menu’s styles and adding some animation, Mobile Menu Customizer is worth a look.

We’d like to hear from you. Have you tried Mobile Menu Customizer? Let us know about your experience with it in the comments.

Featured Image via Francois Poirier / shutterstock.com

Disclosure: If you purchase something after clicking links in the post, we may receive a commission. This helps us keep the free content and great resources flowing. Thank you for the support!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting

Divi Supreme Pro

With 50+ Divi premium modules and extensions to choose from. Take ...

View Product

8543 Sales

Divi Events Calendar

Easily display and style events from The Events Calendar with custom ...

View Product

6080 Sales

Divi Plus

A versatile multipurpose plugin with lots of modules to design & ...

View Product

5747 Sales


A powerful menu builder that brings the coolest designs and popups ...

View Product

4279 Sales

Divi Contact Form Helper

Upgrade the default Divi Contact Form with tons of missing, premium, ...

View Product

1679 Sales

Divi Carousel Module 2.0

Robust and extremely customizable carousel module for divi.

View Product

6956 Sales

Table Maker

Divi-Modules – Table Maker brings beautiful responsive tables to the ...

View Product

5452 Sales

Divi MadMenu - Header and Menu Creation Tool

Flexible & powerful menu modules for creating headers and menus ...

View Product

1325 Sales

Premade Layouts

Check Out These Related Posts

Get a Free Beauty Salon Layout Pack for Divi

Get a Free Beauty Salon Layout Pack for Divi

Posted on March 27, 2023 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Beauty Salon Layout Pack that’ll help you get your next Beauty Salon...

View Full Post


  1. If the menu has child menus, is the parent link still clickable as a link? Or does the ENTIRE parent menu become the toggle?

    The parent link should still link to a page, and then ARROW should be the toggle…

    • You can set it to collapsible or not. In collapsible mode the parent link opens the child menu. If collapsible is disabled the parent link is a normal link and the child menu displays under it.

  2. Hello, is it possible to change menu layout ? Like when we use the centered logo option in desktop view….

    • Not yet, but probably soon.

  3. Mobile menu sounds good

  4. Respectfully, while there is a bit of ‘fun’ added with animations and themes, it would be wise to read up on the ‘hamburger’ menu and how poor it is for usability (even when the interaction is rather static or a typical dropdown). Some basic rules are:
    1. They need to be avoided: Don’t use it unless you really have no choice. Navigation needs to be visible and exposed.
    2. Label it with “MENU” below (or above).
    3. Keep the interaction simple. Don’t frustrate the user for the sake of being clever with a nav menu.
    4. Never, EVER replace a navigation bar on a desktop/laptop site with a hamburger menu. Ever.

    The commentary and programming here is nice and interesting but navigation needs to be visible, dull, and understood. Our goal should always be a pleasing user *outcome* over a satisfying statement of what *we* like and want to do.

    We are not the user.
    ; )

    • Hi Joel.
      Providing users with a possibility to see all menu items without performing extra actions (e.g. clicking to open menu) is obviously a better chice for UX than hiding menu items under a hamburger icon but this is inevitable on mobile devices due to space scarcity on smaller screens.

      Speaking of the Mobile Menu Customizer plugin, it allows adding any text on the left or right hand side of the hamburger (e.g. “Menu”) thus making it easier for users to identify the mobile menu location.

      It also has lots of other useful features for mobile menu but that does not oblige the web developers to overuse them. The same goes about any other plugin or theme, it totally depends on web project stylistic and functionality requirements.

  5. It would be great to have a full screen mobile menu like a lot of themes have.

  6. Hi guys, how about logo position? Can I change it without change in desktop? I have a website that have centered logo at desktop, and I need to leave the logo in the left side at mobile. This plugin can do it?
    Thanks a lot

    • Hi Pedro.

      Currently the MMC plugin does not provide such a feature but I will consider adding it in the future updates, thank you.

  7. Great plug in! Thanks!!!

    • Thanks for your comment Infloweb, glad to know you like it. Regards.

  8. Thanks for the article.
    I bought the plugin after reading.
    Finally it’s fun to customize the mobile menus

  9. Hi,

    I’m having a really hard time finding where I can actually download this plugin. I have the lifetime membership and didn’t see it in the list of downloads.


    • This is a third party plugin. It’s not by us or included in our membership. We’re just highlighting the work of developers in the Divi community.

    • Hi Tony,
      As Nathan has already said, being a third party plugin, this plugin is not included in ET membership plans(I am the developer of this plugin). If you want to obtain more information about downloading it please feel free to check out the link in the “License” section of this article, at the very end of it. Thanks.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today