Fixed Header Settings

1. Enabling the Fixed Header
2. Styling the Fixed Header

Divi MadMenu does not use the default positioning functionality provided by Divi for all Divi Builder elements(sections, rows and modules), but it has its own fixed positioning system. This system allows to apply the fixed positioning to the header and apply a different design/styling to the fixed header which takes effect when the fixed header gets triggered on scroll.

1. Enabling the Fixed Header

By default Fixed header is disabled, to enable it use the Enable Fixed Header setting in the Advanced->Position section

This will reveal the Fixed Header Position setting allowing to choose where to place the fixed header: to Top or Bottom of the viewport, or disable it (the Not Fixed option).

IMPORTANT: Do not change the positioning of the section, row and the column containg the Divi MadMenu header with the Fixed header enabled. Otherwise it may cause unexpected behaviour of the fixed header in the Divi Builder.

The Fixed Header Position setting is a responsive setting allowing to set the fixed header position differently for different devices and even disable it for a specific device. 

For example, you can place the fixed header to Top on Desktop, to Bottom on Tablet and disable it on Phone (select the Not Fixed option for the Phone device).

There are two different Top options:

1. Top (Overlap Content)
2. Top (No Content Overlap)

The Top(Overlap Content) option makes the Fixed header overlap the page content(selected by default). It is useful when you need to have a Fixed header with transparent background.

The Top(No Content Overlap) option prevents the Fixed header from overlaping the page content by pushing the page content down by the amount equal to the header's height. This option should be selected when the header background color is not transparent and you want to avoid the page content from being covered by the fixed header.

2. Styling the Fixed Header

Divi MadMenu allows to design the Fixed header differently form the Normal header by providing two identical sets of design options for both.

The Fixed header design options are placed into tabs having the  Fixed label 

Except for the fixed header Layout settings of individual elements which are placed in each element's tab in the Design->Layout:Elements section below the normal header layout settings of that element

All fixed header setting labels have the (Fixed) postfix to distinguish them from the normal header settings and avoid confusion.