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 the header builder, 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.

sticky header

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

sticky header

3
Enable 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.
4
Close the settings tab and click on Sticky Header.

sticky header

5
Add elements to create your sticky header.

sticky header

6
Click on View to preview the changes.

sticky header

x
Note: Scroll down the page to activate the sticky header.
Was this helpful?

Related Topics

Related Forum Topics

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket