Header Builder – Making a Sticky Header

Updated on January 2, 2019

Header Builder provides a feature to create a sticky header – when a visitors scrolls down the page, a new (sticky) header will slide down, hiding the initial header. The sticky header can help to make it easier for visitors to navigate through a site as they can quickly access the navigation menu rather than having to scroll back to the top of the page.

 

In this article we’ll explain how to create a sticky header using the header builder.


Activating the Header Builder

By default, the Header Builder is disabled. To learn how to activate it, check out this article.


Making a Sticky Header

To create a sticky header using the Header Builder:

1From the WordPress left menu, go to Jupiter > Header Builder.

sticky header

2From the left side, click on the Settings (cog icon).

sticky header

3Enable the Sticky Header option and configure the settings as required.

sticky header

SettingDescription

Sticky Header Offset Decides when the header goes into the sticky header state.
Sticky Header Behaviour Sets how the sticky header is going to behave.
4Close the settings tab and click on Sticky Header.

sticky header

5Add elements to create your sticky header.

sticky header

6Click on View to preview the changes.

sticky header

Did this answer your question?