Divi Plugin Highlight – Mobile Menu Customizer

Last Updated on March 9, 2023 by 17 Comments

Editorial Note: We may earn a commission when you visit links on our website.
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
  3. README

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

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

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

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.

License

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

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 60+ Divi premium modules and extensions to choose from. Take ...

View Product

11190 Sales

Divi Plus

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

View Product

7691 Sales

Divi Contact Form Helper

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

View Product

3546 Sales

Divi Gallery Extended

Masonry gallery plugin for Divi with category filter, dynamic ...

View Product

3892 Sales

Divi Events Calendar

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

View Product

8311 Sales

Table Maker

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

View Product

7053 Sales

DiviMenus

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

View Product

5927 Sales

Divi Carousel Module 2.0

Robust and extremely customizable carousel module for divi.

View Product

8387 Sales

Premade Layouts

Check Out These Related Posts

Get a Free Augmented Reality Layout Pack for Divi

Get a Free Augmented Reality Layout Pack for Divi

Posted on March 25, 2024 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 Augmented Reality Layout Pack that’ll help you get your next Augmented...

View Full Post
Download a Free Webinar Theme Builder Pack for Divi

Download a Free Webinar Theme Builder Pack for Divi

Posted on March 22, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Webinar Theme Builder...

View Full Post
Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Updated on March 21, 2024 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 Modeling Agency Layout Pack that’ll help you get your next Modeling...

View Full Post

17 Comments

  1. 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.

    Thanks!

    • Hi Tony,
      Are you also getting tired of paying for DIVI but all they seem to do is to earn commission by commenting on other peoples hard work?
      Wouldn’t it be interesting if Elegant Themes actually starting adding this stuff to their DIVI development list?

      Honestly – this is the last year I subscribe to DIVI. Elegant Themes – have you wondered why Elementor are being so successful? Because they don’t constantly charge for every last thing.

      I have been a DIVI customer for probably 10 years. People like me were responsible for making DIVI popular – installing it for clients all-over-the-place. But I need to code hack to change mobile menus? I already moved a customer to Elementor last week as I couldn’t find a decent WooComm slider for DIVI…..

      Ah c’mon….

      I know this comment will not ‘adhere to comments policy’ 🙂

      Cheers,
      Ian

    • 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.

    • 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.

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

  3. Great plug in! Thanks!!!

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

  4. 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.

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

  6. 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.

  7. Mobile menu sounds good

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

    • Not yet, but probably soon.

  9. 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.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today