Header Builder

Last Updated on

Header builder is a new feature introduced to Jupiter which lets you create and modify your website header using a visual drag & drop editor

Note: Header builder is in beta version. Please do not test it on a live website until the stable version release. If you’ve found a bug related to the header builder, report it as shown in this article.

In this article

Activating the Header Builder

To activate the header builder:

From the WordPress left menu, go to Jupiter > Theme Options > Header

Click on Header Builder.

A warning message pop-up will appear. Click on Agree.

Click on theĀ Save Settings button.

Access the header builder from the WordPress left menu, Jupiter > Header Builder.

Header Elements

Click on the related “+” button to open the list of elements.

Note: Header builder is still a work in progress and more elements will be added in future Jupiter updates.
Beware! When using Navigation element in Header Builder, Mega Menu feature is unavailable there. It can be used only with built-in header styles.

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.

Click on an element inside the header area.

A new panel will open on the right side of the page with the element specific settings.


Configure the settings.

Header Settings

Click on the related “cog” icon to open the header settings.

A new panel will open with the list of settings:

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 HeaderEnables sticky header.
Sticky Header OffsetDecides when the header goes into the sticky header state.
Sticky Header BehaviourSets how a sticky header is going to behave. Available options are slide down and lazy.

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:

From the Header Settings, enable Sticky Header.

Click on the Sticky Header and add your elements.

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.

Note: Changing the header in desktop state will also apply the changes to its child (tablet and mobile) states. Changing the header in tablet state will apply the changes to its child (mobile) but not parent (desktop) state.

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:

Click on an element inside the header area.

A new panel will open on the right side of the page with the elements settings. Click on Preview.

A new window will pop up with the preview of the element.

Previewing the Header

To preview the whole header:

Click on the Preview button in the top right corner of the page.

A new tab will open in your browser where you can check the header changes.

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:

In Header Builder click on the row to open the row settings.
In the row settings, set margin-top and margin-bottom values so the header has equal space on top and bottom.

Save the settings.

Check the changes on frontend.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket