General Overview of Divi MadMenu Settings
1. Main Module Settings
The settings pane of the Divi MadMenu extension is organized similat to the core modules of Divi. The main module settings are located in the same sections as the core Divi modules settings:
- Content: Link, Background, Admin Label and a new section - Builder Settings - which contains settings that take effect in the Divi Builder interface only and are intended to make the header design workflow easier.
- Design: Sizing, Spacing, Border, Box Shadow, Filters, Transform and Animation sections
- Advanced: Visibility, Transitions, Position and Scroll Effects sections.
Also the CSS ID & Classes section for assigning CSS ID and classes to the module, and the Custom CSS section allowing to apply custom CSS.
2. Elements Settings
Divi MadMenu module has seven different header elements that can be enabled and disabled depending on your needs:
- Desktop Menu
- Mobile Menu
- Logo
- Search
- Cart
- Button One
- Button Two
Each of the elements has its own set of content and design options which appear in the settings pane when the element is enabled and get hidden if its disabled.
To explore the element settings we will take the Desktop Menu element as an example. The elements can be enabled/disabled in the MadMenu Settings->Content->Elements section:
When the element is enabled all its settings become visible: Content, Design and Visibility settings
Each element has its layout settings under the Layout:General and Layout:Elements sections. The layout settings allow controlling the header layout: set the elemens' order, column width, and align the header elements as well as their contents.
The settings under the Layout:General section allow aligning the header elements horizontally, set the dropdown menu direction and set the order of the elements.
The individual element layout settings are placed under the Layout:Elements section. These settings allow setting the element's column width as well as align the element's content both vertically and horizontally.
Each element's layout settings are placed under a tab labeled using the first letter(s) of its name the following way:
- DM: Desktop Menu element
- MM: Mobile Menu element
- L: Logo element
- S: Search element
- C: Cart element
- B1: Button One element
- B2: Button Two element
For example, the Desktop Menu element's layout settings are under the tab with the label DM
To control each element's responsive visibility use the settings under the Advanced -> Visibility section. The Visibility settings also allow selecting the elements that need to be hidden when the search icon is clicked and the search form shows up.