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:
Mobile Menu
The Mobile Menu section contains the following settings:
- Mobile Menu
- Mobile Menu Breakpoint
- Collapse Submenus
- Close On Outside Click
- Dropdown Menu Placement
- Opening Animation
- Opening Animation Duration
- Closing Animation
- Closing Animation Duration
- Highlight Items On Scroll
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 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 device will be displayed between 981px to 1280px screen width.
The Collapse Submenus setting makes the mobile menu submenus collapsible allowing the user to toggle the submenus by clicking the parent menu item/arrow. This feature is especially useful for complex mobile menus having many submenu items/levels which cause the mobile menu expand beyond the vewport on small mobile device screens.
Enabling this setting adds a set of additional settings for the collapsed submenus, please read this docs article for more details: Collapse Mobile Menu Submenus
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.
The Highlight Items On Scroll feature is useful for one-page layouts with anchor links in the menu. It toggles the active state for menu items with anchor links based on current scroll position to indicate which section is currently visible in the viewport. The active item text and background colors can be set in the Design settings.
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.
