Header Builder – Header Settings

Last Updated on

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.

Beware! The header builder ist 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.

Fixed Header

To enable the header builder settings:

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

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

Fixed header has two options:

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

header settings

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

This option enables a sticky header on your site.

Note: The difference between sticky and fixed header is that the fixed header shows the main header content by default. Unlike the sticky header, you can create a new content for it via the header builder as described in the article.

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:

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.

Note: If you have any questions or experience any difficulties with Header Builder settings, please contact our help desk.
Was this helpful?

Related Topics

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket