Desktop Menu Settings
To enable the Divi MadMenu Desktop Menu element open the module settings modal and go to Content->Elements and click the Enable Desktop Menu
When the Desktop Menu is enabled its Content, Design and Advanced settings all show up in the module settings pane.
1. Content Settings
The Desktop Menu element's Content settings are located under the Content->Desktop Menu section:
The following settings are available:
- Desktop Menu
- Menu Breakpoint
- Submenu Animation
- Submenu Animation Duration
- Highlight Items On Scroll
The Desktop Menu setting provides the list of the menus created on the Appearance->Menus page allowing to choose which one to use for the header.
If you need to assign different menus for Desktop, Tablet and Phone devices simply enable the responsiveness by clicking the device icon and then select menus for each device.
To enable the desktop menu on Tablet and Phone use the Menu Breakpoint setting. The default breakpoint of the desktop menu is 980px but it is possible to set any breakpoint you need. For example, setting a breakpoint to 0(zero) will make the desktop menu visible on all devices.
The Submenu Animation setting allows changing the animation of the desktop menu submenus appearing when the parent menu items are hovered over, and the Submenu Animation Duration allows setting the duration of the submenu animation.
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.
2. Design Settings
The Design settings of the Desktop Menu element are organized into multiple settings sections under the Design tab of the module settings.
The Desktop Menu Order setting allows to set the Desktop Menu element order relative to other enabled header elements, you can find it in the Design->Layout:General section. The element order value can be different for each device.
To align the Desktop Menu element contents vertically and horizontally, and to set its column width use the layout settings located under the Design->Layout:Elements->DM tab:
The desktop menu, menu items, submenu and submenu items all have their own sets of design options both for the Normal and Fixed header (located in different tabs labeled Normal and Fixed respectively).
The Design options set includes colors, spacing, borders, box shadow, sizing and text options.
The complete sets of text options are available for both the main menu items and the submenu items allowing to apply different styling to the main menu links and the submenu links. The text options for the Normal and Fixed header are organized into two different tabs labeled accordingly.
3. Advanced Settings
The Desktop Menu element's responsive visibility can be controlled using the Show Desktop Menu setting under the Advanced->Visibility settings section. This setting becomes relevant if you've set a custom breakpoint for the desktop menu using the Menu Breakpoint setting in Content->Desktop Menu section.
