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.

x
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:

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

2
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

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


This option enables a sticky header on your site.

x
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
x
Note: Header Height can be set in Theme Options > Header. This section is described in this article.

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.

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

Related Topics

Related Forum Topics

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket