Header Builder – Making a Sticky Header
Last Updated on
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.
x
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.
x
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.
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:
1
From the WordPress left menu, go to Jupiter > Header Builder.
2
From the left side, click on the Settings (cog icon).
3
Enable 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. |
4
Close the settings tab and click on Sticky Header.
5
Add elements to create your sticky header.
6
Click on View to preview the changes.
