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.
Note: The difference between sticky and fixed header is that the fixed header shows the main header content by default. With sticky header, you can create a different header which will only be displayed upon scrolling down the page.
In this article we’ll explain how to create a sticky header using the header builder.
Beware! The header builder is still in a beta version. Please do not test it on a live website until the stable release. If you’ve found a bug related to the Header Builder, please report it as shown in this article.
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.
2From the left side, click on the Settings (cog icon).
3Enable the Sticky Header option and configure the settings as required.
| Setting | Description |
|---|---|
| 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.
5Add elements to create your sticky header.
6Click on View to preview the changes.
Note: Scroll down the page to activate the sticky header.
