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:

1From the WordPress left menu, go to Jupiter > Header Builder.

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

Fixed header has two options:

  • Fixed header (Desktop & Laptop)
  • Fixed Header (Tablet & Phone)

header settings

SettingDescription

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.

header settings


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:

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

3Save the settings.

Check the changes on frontend.