The header builder is a new feature in Jupiter which lets you create and modify your website header using a visual drag & drop editor. In this article we’ll explain how to configure the header settings in the Header Builder.
Activating the Header Builder
By default, the header builder is disabled. To learn how to activate the header builder, check out this article.
Fixed Header
To enable the header builder settings:
Fixed header has two options:
- Fixed header (Desktop & Laptop)
- Fixed Header (Tablet & Phone)
| Setting | Description |
|---|---|
| Fixed Header (Desktop & Laptop) | Enables a fixed header only for desktop and laptop devices. |
| Fixed Header (Tablet & Phone) | Enables a fixed header only for tablet and phone devices. |
Overlapping Content
If you enable this option, the header will overlay your site content. It will act just like a transparent header where the header overlaps the content as shown in this example.
Sticky Header
This option enables a sticky header on your site.
Sticky Header Offset
This setting decides when the header goes into the sticky header state.
The available options are:
- Header Height
- 25% of Viewport
- 30% of Viewport
- 40% of Viewport
- 50% of Viewport
- 60% of Viewport
- 70% of Viewport
- 80% of Viewport
- 90% of Viewport
- 100% of Viewport
Sticky Header Behavior
It sets how a sticky header is going to behave. Available options are Slide Down and Lazy.
If you activate the Slide Down option, the sticky header will slide down smoothly while you scroll the site page.
Lazy option has a different action. Sticky header appears when you scroll up the site page.
Increasing Header Height
When adding some elements to the header via Header Builder, you may want to increase the header height.
By default there is no such option in the Header Builder, but you can do this with margin options in the row settings.
To increase the header height:
Check the changes on frontend.
