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 the Fixed header is disabled and 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 the fixed header(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 pushiing 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 partially covered by the 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, one for the Normal header and another one for the Fixed header.

The Fixed header design options are placed either into tabs labeled as Fixed (like the text options) 

... OR in toggles with the word  (Fixed) added to their labels

All of the Fixed header settings labels have the (Fixed) word as well

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