Divi MadMenu layout settings allow to control the header elements vertical and horizontal alignment, set the element's column width and the menu dropdown direction, and also order the elements differently for each device.
The layout settings are located under the Design tab of the module settings separated into three sections:
1. Layout: General
The settings under the Layout: General section allow to align the elements columns(not their content) horizontally, set the dropdown direction and order the elements.
Elements can be ordered responsively which allows to have different header structures on each device(Desktop, Tablet and Phone). By default all the elements order has a 0(zero) value, and increasing this value moves the element to the right hand side of the header.
The order value is a relative value, so, the element with a larger order value will be closer to the right hand side than the element with a smaller order value.
The individual element layout settings are located under the Layout: Elements (and Layout: Elements (Fixed)) toggle. These settings allow setting the element's column width as well as align the element's content vertically and horizontally.
2. Layout: Elements
Each element's individual layout settings are placed under a tab labeled using the first letter of the element's name the following way:
- M: Menu elements (contains both the Desktop Menu and the Mobile Menu elements' layout settings)
- 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 M
The element content can be aligned both vertically and horizontally but in order for the alignment to take effect the content width/height should be less than the element's column width/height.
The columns are stretched vertically by default and their height depends on the header height, however, the width of the column can be controlled using the Column Width and Column Max Width settings of each element.
The column width can be set using different units ( px, %, etc.) but setting its width value to auto will make the column push other elements and occupy all the available space (the column will be stretched horizontally).
3. Layout: Elements (Fixed)
The layout settings of this section are identical to the settings in the Layout:Elements section but take effect when the Fixed header is enabled.