Create Mobile Menus Using Divi Builder Layouts and the MMC Plugin

by | Apr 22, 2018 | 6 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:

  1. HEADER TEXT & ICON COLOR – #65bbed
  2. SELECT MENU ICON FORMAT – Text Only
  3. TYPE TEXT FOR CLOSED MENU – MENU 
  4. 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:

  1. MAKE MENU FULLWIDTH – YES
  2. FULLWIDTH MENU ON PHONE – Checked
  3. FULLWIDTH MENU ON TABLET – Checked 
  4. SECONDARY MENU ITEMS POSITION – Remove secondary menu items
  5. MENU PADDING – 0 (zero)
  6. 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.

Pin It on Pinterest

Shares
Share This