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 become visible.
1. Content Settings
The Desktop Menu element's Content settings are located under the Content -> Desktop Menu toggle
The following settings are available:
- Desktop Menu
- Menu Breakpoint
- Dropdown Menu Animation
The Desktop Menu setting provides the list of the menus created on Plugins -> 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 Dropdown Menu Animation setting allows setting different animations for the desktop menu submenus appearing when the parent menu items are being hovered over.
2. Design Settings
The Design settings of the Desktop Menu element are organized into multiple settings sections(toggles) under the Design tab of the module settings.
The Desktop Menu Order setting allows setting the Desktop Menu element order relative to other header elements, it can be found in the Design -> Layout:General toggle. The element order value can be different for each device.
To align the Desktop 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 elements' layout settings
The desktop menu, menu items, submenu and submenu items 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 both the menu items and submenu items allowing to apply different styling to the main menu links and the submenu links. Unlike the rest of the design options, the text options for the Normal and Fixed header are organized into tabs.
3. Advanced Settings
The Desktop Menu element's responsive visibility can be controlled using the Show Desktop Menu setting under the Advanced -> Visibility settings toggle. This setting becomes relevant if you've set a custom breakpoint using the Menu Breakpoint setting in Content -> Desktop Menu.