Jupiter theme allows you to create different types of headers and combinations of header elements. The header has four main types and consists of the toolbar, logo, navigation, social icons and search form.
In this article, we explain the global and page specific header types, as well as using the secondary header and configuring the styling/design properties of the headers.
To see different header types in action, check the type 1, type 2, type 3 and type 4 demos.
Configuring the Global Header Type
In the Jupiter theme, you can choose four different header types and change the combination of the elements. The default is header type 1.
To change the header type:
Configuring the Header Container
It’s possible to change the main header elements container to boxed or full width. You can also change the settings for the header height in different states.
| Setting | Description |
|---|---|
| Boxed Header | Sets the header elements container based on the Main Grid Width setting. Note that this setting affects the container of the elements and not the whole header. It has no effect on header type 4. |
| Header Height | Sets the header height. The default value is 100 pixels. |
| Sticky Header Height | Configures the header height in a sticky state. The default value is 50 pixels. It has no effect on header type 4. |
| Responsive Header Height | Sets the header height on small devices. The default value is 90 pixels. This option will only change the header height for the screen width you define in the Main Navigation Threshold Width setting. |
Disabling the Header Elements
By default, the logo, main navigation, and search form are visible in the header. To help you customize the header some settings will allow you to hide them.
| Setting | Description |
|---|---|
| Show Logo | Sets the visibility of the logo for all header types. |
| Show Main Navigation | Configures the visibility of the main navigation for all header types. |
| Search Form In Header | Sets the visibility of the search form in for all header types. |
Configuring the Sticky Header
The sticky header feature allows you keep the header at the top of the page while you scroll down the page. This feature has no effect on header type 4.
| Setting | Description |
|---|---|
| Sticky Header Behavior | Sets the behavior of the header in a sticky state. Note that the Lazy behavior does not work on header type 2. |
| Sticky Header Offset | Sets the point where the sticky behaviour should be triggered. |
Configuring the Start Tour Link
By default, no tour link is visible in the header. To add one, fill out the information in the following settings. This link will be visible on right side of the header.
| Setting | Description |
|---|---|
| Start Tour Text | Set the link text |
| Start Tour URL | Sets the URL of the link. It should include http:// at the beginning. |
Overriding the Global Header Type on a Page
Sometimes we need to show another header type for a specific page. On each page, you can override the global header type. This technique is mostly used for home pages.
To override the header type:
Overriding Global Logos
It’s also possible to override the global logos by adding logos with settings below . To learn more about logos, read the Configuring logos article.
| Setting | Description |
|---|---|
| Upload Logo (Dark & Default) | Sets the default logo when your header skin is dark. |
| Upload Logo (Light Skin) | Sets the logo when the transparent header is enabled and your header skin is light. |
| Upload Logo (Header Sticky State) | Configures the logo when the header is in sticky state. |
| Upload Logo (Mobile Version) | Configures the logo for small devices. |
Configuring the Transparent Header
To enable the transparent header:
| Setting | Description |
|---|---|
| Transparent Header Skin | Sets the skin for the header (not in the sticky state). The skin includes logo and link colors. |
| Transparent Header Bottom Border Color | Sets the bottom header border color. |
Using a Secondary Header
The Header shortcode allows you to add a header anywhere in the content via Visual Composer. It’s really helpful when you need to remove the header from top of the site and add it after the first section. Check out the Poseidon template to see it in action.
Configuring the Header Styling
You can change the header styling properties globally and override them on a page. Global settings can be found in Jupiter > Theme Options > Header, and page specific settings can be found on each page in the Jupiter Styling Options box. In this section, we explain available styling properties for the different header states.
Header
Header styling properties allow you to change some of the element’s properties and are located in Jupiter > Theme Options > Header.
| Setting | Description |
|---|---|
| Header Background Opacity | Changes the header background color and image opacity. It’s useful for creating a semi-transparent header. |
| Sticky Header Background Opacity | Changes the header background color and image opacity in the sticky state. It’s useful for creating a semi-transparent header. |
| Header Bottom Border Thickness | Sets the width of the bottom border of the header. |
| Header Bottom Border Color | Sets the color of the bottom border of the header. |
| Sticky Header Bottom Border Color | Sets the color of the bottom border of the header in sticky mode. |
| Header Start Tour Link Color | Sets the link color for start tour. |
The only overridable property on a page is the Sticky Header Bottom Border Color setting.
Mobile Header
Mobile styling properties allow you to change some of the elements properties on small devices. The settings are located in Jupiter > Theme Options > Mobile Header.
| Setting | Description |
|---|---|
| Header Background Color | Sets the background color for the whole header. |
| Navigation Background Color | Sets the background color for the header navigation element. On small devices, the navigation will be shown as a dropdown menu. |
| Navigation Text Color | Sets the text color of the header navigation links. |
| Search Form Input Background Color | Sets the search field background color. |
| Search Form Input Text Color | Sets the placeholder and text color of the search field. |
| Toolbar Background Color | Sets the header toolbar background color. |
| Toolbar Text Color | Sets the text color of toolbar tagline and date |
| Toolbar Link Color | Sets the link text color for the toolbar phone number, subscribe and login form |
| Toolbar Social Icon Color | Sets the color of social icons. |
Header Burger Icon
The burger icon is visible when you use header type 3 on small devices. The only available setting is Header Burger Icon Color which changes the color of the icon and is located in Theme Options > Header.
Global Header Background
When you set the background color or image globally, it will be applied to the header on all pages.
To set the background color or image globally:
| Setting | Description |
|---|---|
| Background Repeat | Defines how the background image is repeated. By default, it repeats both vertically and horizontally. |
| Background Attachment | Determines whether the background image should be fixed or scroll with the rest of the page. By default, it scrolls with the rest of the page. |
| Background Position | Sets the starting position of the background image. By default, the position is the top-left corner of the element. |
| Cover Whole Background | Sets the background-size CSS property to fill the whole container. |
| Background Color | Sets the background color of the header. |
| Background Image | Sets the background image of the header. |
Page Specific Header Background
Each page allows you to override some of the global properties. In this case, we override the global header background for a specific page.
To override the header background image:
