Layout Settings

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
  2. Layout: Elements
  3. Layout: Elements (Fixed)

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:

  1. MMenu elements (contains both the Desktop Menu and the Mobile Menu elements' layout settings)
  2. LLogo element
  3. SSearch element
  4. CCart element
  5. B1Button One element
  6. B2Button 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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.