Header builder is a new feature introduced to Jupiter which lets you create and modify your website header using a visual drag & drop editor
Activating the Header Builder
To activate the header builder:
Header Elements
Click on the related “+” button to open the list of elements.
Drag & Drop Editor
Header builder provides a visual drag & drop editor which lets you simply drag header elements and drop them into a desired place on your header.
Element Settings
Adding an element to the header lets you access its settings.
Header Settings
Click on the related “cog” icon to open the header settings.
A new panel will open with the list of settings:
| Setting | Description |
|---|---|
| Fixed Header (Desktop & Laptop) | Creates a fixed header only for desktop and laptop devices. |
| Fixed Header (Tablet & Phone) | Creates a fixed header only for tabled and phone devices. |
| Sticky Header | Enables sticky header. |
| Sticky Header Offset | Decides when the header goes into the sticky header state. |
| Sticky Header Behaviour | Sets how a sticky header is going to behave. Available options are slide down and lazy. |
Sticky Header
Header builder lets you create a separate sticky header which can be different from your default header. Sticky header will “stick” to the top of your website upon scrolling down.
To create a sticky header:
Header Responsive States
Header builder provides three different responsive states related to the screen width. Use the header responsive states to create and improve the header appearance on different devices such as desktop, tablet, and mobile.
By clicking on one of the devices, you will be able to create a header that will be displayed only on that specific device.
Previewing the Changes
It is possible to preview the elements and the changes you’ve made to you the header before actually applying them to the front end of your website.
Previewing the Elements
To preview how a specific element is going to look in the header:
Previewing the Header
To preview the whole header:
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.
