Create Mobile Menus Using Divi Builder Layouts and the MMC Plugin
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.
So, here is the mobile menu we are going to create:
Menu layout structure
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
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.
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.
- 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.
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)