Mobile Menu Settings
To enable the Divi MadMenu Mobile Menu element open the module settings modal and go to Content->Elements and click the Enable Mobile Menu:
When the Mobile Menu element is enabled its Content, Design and Advanced settings all become visible in the module settings pane.
1. Content Settings
The Mobile Menu element's Content settings are organized in two separate sections: the Mobile Menu and the Mobile Menu Toggle under the module settings Content tab.
The Mobile Menu section contains the mobile dropdown menu settings whereas the Mobile Menu Toggle section contains the mobile menu toggle (also known as the hamburger menu) settings:
The Mobile Menu section contains the following settings:
- Mobile Menu
- Mobile Menu Breakpoint
- Collapse Submenus
- Parent Links Clickable
- Accordion Mode
- Close On Outside Click
- Dropdown Menu Placement
- Opening Animation
- Opening Animation Duration
- Closing Animation
- Closing Animation Duration
The Mobile Menu setting provides the list of menus created on Appearance->Menus page allowing to choose which one to display on the mobile devices. It can be the same menu which is selected for the desktop menu or a different one depending on your needs.
If you need to assign different mobile menus for Desktop, Tablet and Phone devices simply enable the responsiveness by clicking the device iconand select menus for each device.
To enable the mobile menu on Desktop use the Mobile Menu Breakpoint setting. The default breakpoint of the mobile menu is 980px but it is possible to set any breakpoint you need.
Setting a custom breakpoint greater than the default (eg. 1280px) will make the mobile menu visible up to 1280px viewport width, and if you've assigned different menus for all three devices then the mobile menu selected for the Desktop device will be displayed between 981px to 1280px screen width.
The Collapse Submenus setting makes the mobile menu submenus collapsible thus decreasing the height of the dropdown menu. This feature is especially useful for complex mobile menus having many submenu items.
Collapsed submenus can be expanded by clicking either the parent item arrow icon or the entire parent item depending on the Parent Links Clickable setting value.
By default the Parent Links Clickable setting is disabled which makes the parent links disabled and clicking the parent item simply toggles the submenu.
However, if you need the submenus to be collapsible but the parent item links still remain clickable then simply enable the Parent Links Clickable setting. This will make clicking the parent item arrow toggle the submenu, whereas the parent item link will function normally.
Enabling the Accordion Mode forces the previously expanded submenu to close when another submenu of the same level has been clicked to expand thus allowing only one submenu expanded at a time.
The Close On Outside Click option allows making the mobile dropdown menu close automatically whenever the site visitor clicks somewhere on the page outside of the mobile dropdown menu's boundaries.
The Dropdown Menu Placement feature allows to change the mobile dropdown menu placement in the header.
The Default option places the dropdown menu in the middle of the header bar independently from the position of the mobile menu toggle in the header, and changing the order of the mobile menu toggle does not affect the position of the dropdown menu, it always remains in the middle of the header.
However, the Attached To Menu Toggle option of the Dropdown Menu Placement setting attaches the mobile dropdown menu to the mobile menu toggle making it move together with the mobile menu toggle as you change it's order in the header bar.
To change the mobile menu opening and closing animations and their durations use the Opening Animation & Opening Animation Duration and the Closing Animation & Closing Animation Duration settings respectively.
The mobile menu animations settings are responsive allowing to set different animations for different devices in any "opening-closing" combinations you want.
Mobile Menu Toggle
The Mobile Menu Toggle content settings allow to use either a hamburger icon, a label or both the icon and label as the mobile menu toggle depending on the option selected for the Toggle Format setting.
Different labels can be set for the closed and opened states of the dropdown menu using the Toggle Label(Closed) and Toggle Label(Opened) fields, and if the Icon and Label option is selected then the Toggle Label Position setting appears allowing to set the label placement relatively to the hamburger icon.
2. Design Settings
The Design settings of the Mobile Menu element are organized into multiple settings sections under the Design tab of the module settings.
The Mobile Menu Order setting allows to set the Mobile Menu element (the Hamburger icon) order relative to other enabled header elements, it is located in the Design->Layout:General section. The element can be set different order values for each device.
To align the Mobile Menu element's contents vertically and horizontally and to set its column width use the layout settings located in the Design->Layout:Elements->MM tab.
The mobile menu, menu items, submenu, submenu items and the mobile menu toggle(the hamburger menu) all have their own sets of design options both for the Normal and Fixed headers. The design options set includes colors, spacing, borders, box shadow, sizing and text options.
The complete sets of text options are available for the mobile menu items, mobile submenu items and the mobile menu toggle label (if the toggle label is enabled in Content->Mobile Menu Toggle->Toggle Format). This allows applying different font styling to the mobile menu and submenu links as well as the mobile menu toggle label.
The text options for the Normal and Fixed headers are organized into two separate tabs labeled accordingly: Normal and Fixed.
3. Advanced Settings
The Mobile Menu element's responsive visibility can be controlled using the Show Mobile Menu setting in the Advanced->Visibility settings section.