Create Mobile Menus Using Divi Builder Layouts and the MMC Plugin

by Ivan Chiurcci | Apr 22, 2018 | 13 comments

In this post we are going to look at the new feature of the Divi Mobile Menu Customizer plugin which lets you create mobile menus using Divi Builder Layouts!

This feature allows you to add any layouts created in Divi Builder to the mobile menu whether it is a section with a single module or a complete mobile menu layout entirely designed in Divi Builder.

You can create a mobile menu using a Divi layout only or combine the layouts with the traditional menu as well by adding layouts above, below or both above and below the menu items.

In this quick tutorial I am not going to teach you how to create a layout in Divi Builder for the mobile menu since that should probably be a separate post but I’ll only provide a quick guide about how to add layouts to the mobile menu using the MMC plugin and tweak it a bit to make it look better.

So, here is the mobile menu we are going to create:

Menu layout structure

The layout of the menu above has been created entirely in Divi Visual Builder(except for the header bar), let’s check its structure in the Wireframe mode:

As you can see, it’s a single section with two rows in it. The first row has a Search module at the top followed by Blurb modules used as menu items except for the last two which are the Phone Number and the Company Address.

The second row contains a single Button module which is the Contact Us CTA button. The only custom CSS used for this layout is a single line in the Button module Advanced Settings which sets the min-width of the button to 100%.

This menu layout has been saved to Divi Library and we are going to add it to the mobile menu from there.

Adding the layout to mobile menu

The Mobile Menu Customizer plugin allows you to add the layout to the menu assigned to MMC Mobile Menu location only, which replaces the Primary Menu on mobile devices.

So, first we need to assign a menu to the MMC Mobile Menu location othervise it won’t work. And since we are creating a mobile menu using the Divi layout only, we need to assign an empty menu which has no menu items in it.

To do this navigate to Appearance->Menus and create and assign the empty menu.

Next go to Divi->Theme Customizer->Mobile Menu Customizer panel where you will find a bunch of MMC plugin options sections. The last one at the bottom is the one we need – the Divi Library section.

In the Divi Library section find the ADD LAYOUTS FROM DIVI LIBRARY control which provides three different options: Above, Below, and both Above and Below menu items which let us choose where to add the layout.

Since we are creating a mobile menu using the Divi layout only it doesn’t matter for us which option to select, any of them enables the Divi Layouts support. The position of layout(s) matters if you create a menu by combining the native menu with the layouts from Divi Library.

After we select where to add the layout another select option shows up which will let us add our layout to the mobile menu by simply selecting it from the dropdown list.

And that’s it, we have just added a layout from Divi Library to the mobile menu!

Final tweaks

But we are not done yet, our menu looks like this:

To complete the design of our menu we need to go to Mobile Menu Customizer->Menu Header Settings section and set the followings for header bar:

HEADER TEXT & ICON COLOR – #65bbed
SELECT MENU ICON FORMAT – Text Only
TYPE TEXT FOR CLOSED MENU – MENU
TYPE TEXT FOR OPENED MENU – CLOSE

You might want to play with the header text size as well.

We also need to remove the menu top border, padding and make it fullwidth. And if you have a secondary menu assigned then the secondary menu items need to be removed as well.

Luckily, MMC plugin allows you to do all of the above just in a few clicks. Go to Mobile Menu Customizer->Menu Settings section and set the followings:

MAKE MENU FULLWIDTH – YES
FULLWIDTH MENU ON PHONE – Checked
FULLWIDTH MENU ON TABLET – Checked
SECONDARY MENU ITEMS POSITION – Remove secondary menu items
MENU PADDING – 0 (zero)
MENU BORDER – 0 (zero)

That’s all, now we have a unique mobile menu with search functionality, menu items with icons, custom text(company address) and a CTA button. Save it and enjoy!

I hope you’ll find this tutorial useful. Click the button below to learn more about the Mobile Menu Customizer plugin. And, of course, feel free to share your suggestions and thoughts in the comments section below.

Learn More

View All Products

13 Comments

Emre on July 29, 2020 at 4:20 pm

How to create a layout in the Divi Builder for mobile menu?

Greg on March 14, 2019 at 3:02 am

Would it be possible to add Polylang language switcher in the header bar next to the hamburger icon?

Ivan Chi on March 14, 2019 at 11:44 am

Hi Greg,

corrent version of the plugin(v2.6.6) does not have such a feature, unfortunately.
Reply
- halim on April 23, 2019 at 6:41 am
  
  Hi
  How I get MMC?
  Reply
  - Ivan Chi on April 23, 2019 at 7:35 am
    
    Hello Halim,
    
    you can purchase it in our store here
    Reply

Johannes on February 19, 2019 at 1:22 pm

Hi Ivan,

I´m trying to modify my Divi Mobile Menu (Fullwidth Menu) with the MMC Plugin. It doesn´t seem to work with the Divi-Fullwidth Menu. Does it only work with the Divi “Standard” Menu?

Thanks for the help!

Johannes

Ivan Chi on February 19, 2019 at 3:07 pm

Hi Johannes,

the MMC plugin supports Divi native header but not the Fullwidth Menu module. So, I am afraid it can’t be used to customize menus created using the Fullwidth Menu module.
Reply

Braden Katz on August 4, 2018 at 10:49 pm

Hi Ivan,

Would it be possible for you to share this layout as a starting point for creating a similar menu structure?

Thanks!

Ivan Chi on August 4, 2018 at 11:41 pm

Hi Braden,
please contact me and I’ll send this layout to you asap.
Reply

John Graham on July 13, 2018 at 5:57 pm

I’ve just downloaded the mobile menu plugin but I can’t find anything that tells me how or where to install it. Any clues?

Ivan Chi on July 13, 2018 at 7:10 pm

Hi John,
you can install the MMC plugin the same way you install any other plugin via Plugins->Add New page. For more info about the plugin usage please read the documentation, you can download it in your Divicio.us account, your account has been created automatically and the username and password have been sent to your email address.
If you still need assistance please contact me, I will be happy to help.
Reply

Carolyn Breninger on May 11, 2018 at 10:50 pm

I feel stupid, but I cannot figure this out. I think I have a MMC footer menu showing up on desktop. I’m not sure, because I am having a time figuring out how Divi knows it is a Desktop or Mobile menu (I have both modules installed). How do I stop it from doing that?

Simply confused.

Ivan Chi on May 13, 2018 at 6:57 am

Hi Carolyn.
MMC footer menu? There is no such a menu, MMC plugin allows you to assign a separate menu for mobile devices. Simply said, go to Appearance->Menus and create a menu for mobile devices and assign it to the MMC Mobile Menu location, this menu will replace the menu shown on desktop.
Hope this makes sense.
Reply

Create Better Divi Headers

Create Mobile Menus Using Divi Builder Layouts and the MMC Plugin

Menu layout structure

Adding the layout to mobile menu

Final tweaks

Sign Up For Our Newsletter

Please confirm your email address to complete your subscription. Thank you!

13 Comments

Submit a Comment Cancel reply

Subscribe To Our Newsletter

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

You have Successfully Subscribed! Please confirm your email address.

Get FREE Divi Layouts

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Please confirm your email address to complete your subscription. Thank you!

Cyber Monday Is Coming!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Please confirm your email address to complete your subscription. Thank you!