Header flex layouts

Each part (row) of the header has three columns, with width proportions that can be set in two variants.

Variant #1: Flexible middle column

The first variant is called ‘Flexible middle column’ and is set by default for all rows. The main feature of this variant is that left and right columns will take their width from the width of the elements that are added inside them. The middle one will then be flexible between them and take all the free space. This layout is preferable if you place your logo image in the left column and additional icons in the right column. This means that the main navigation element takes the full width, since this is your middle column.

Variant #2: Equal right and left columns

The second variant is called ‘Equal right and left columns’. With this variant the right and left columns are equal and they take all the free space in that row. The middle one will adapt to the width of the elements placed in it. For example: you choose to set a logo with a width of 150px in the middle column. The column in which this logo is placed, will not be any wider. The left and right column will take all the remaining space. This variant is very useful if you prefer to center a element (or logo) in the middle column.