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.
1. Content Settings
The Mobile Menu element's Content settings are organized in two separate toggles: the Mobile Menu and the Mobile Menu Toggle under the module settings Content tab. The Mobile Menu section contains the mobile menu dropdown settings whereas the Mobile Menu Toggle section contains the mobile menu toggle (also known as the hamburger) settings
- Mobile Menu
The Mobile Menu section contains the following settings:
- Mobile Menu
- Mobile Menu Breakpoint
- Collapse Submenus
- Parent Links Clickable
- Accordion Mode
The Mobile Menu setting provides the list of menus created on Plugins -> Menus page allowing to choose which one to display on 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 icon and 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 will be displayed between 981px to 1280px.
The Collapse Submenus setting makes the mobile menu submenus collapsible thus decreasing the height of the dropdown menu(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.
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.
- Mobile Menu Toggle
The Mobile Menu Toggle content settings allow to use either a hamburger icon, a label or both the icon and lable 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(toggles) 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 header elements, it is located under the Design -> Layout:General toggle. The element order value can be different 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 under the Design -> Layout:Elements toggle M tab, it contains both the Desktop Menu and the Mobile Menu elemnts' layout settings
The mobile menu, menu items, submenu, submenu items and the mobile menu toggle(hamburger) all have their own sets of design options both for the Normal and Fixed header (marked with (Fixed) ). 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 lable (if enabled). This allows applying different styling to the mobile menu and submenu links as well as the mobile menu toggle lable text. Unlike the rest of the design options, the text options for the Normal and Fixed header are organized into tabs.
3. Advanced Settings
The Mobile Menu element's responsive visibility can be controlled using the Show Mobile Menu setting in the Advanced -> Visibility settings toggle.