Configuring the Header

Updated on January 2, 2019

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:

1From the WordPress left menu go to Theme Options > Header.

Configuring header type - Header

2From the Header Styles setting, choose one of the header types.

Configuring header type - Header styles

3You can also align the header elements and enable or disable the toolbar. To learn more about the toolbar, read the Configuring toolbar article.

Configuring header type - Align elements

4Click on Save Settings and check your site. You should have the chosen header type for all pages.

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 HeaderSets 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 HeightSets the header height. The default value is 100 pixels.
Sticky Header HeightConfigures the header height in a sticky state. The default value is 50 pixels. It has no effect on header type 4.
Responsive Header HeightSets 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 LogoSets the visibility of the logo for all header types.
Show Main NavigationConfigures the visibility of the main navigation for all header types.
Search Form In HeaderSets 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 BehaviorSets the behavior of the header in a sticky state. Note that the Lazy behavior does not work on header type 2.
Sticky Header OffsetSets 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 TextSet the link text
Start Tour URLSets 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:

1Create or edit an existing page.
2From the Jupiter Styling Options box, enable Override Global Settings. New settings will be visible.

Configuring header type - Override global settings

3From the Header Styles, choose a header type. There are several other settings to customize the header which will be explained in next sections.
4Click on Publish or Update to check the result.

 

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:

1From the Jupiter Styling Options box, enable the Transparent Header setting and make sure that the Enable Transparent Header Skin setting is also enabled.

Configuring header type - Transparent header

2 If you need to change the navigation links and the bottom border color in the transparent header, configure the following settings.
Setting Description

Transparent Header SkinSets the skin for the header (not in the sticky state). The skin includes logo and link colors.
Transparent Header Bottom Border ColorSets the  bottom header border color.
3Click on Update to check the result.

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 OpacityChanges the header background color and image opacity. It’s useful for creating a semi-transparent header.
Sticky Header Background OpacityChanges the header background color and image opacity in the sticky state. It’s useful for creating a semi-transparent header.
Header Bottom Border ThicknessSets the width of the bottom border of the header.
Header Bottom Border ColorSets the color of the bottom border of the header.
Sticky Header Bottom Border ColorSets the color of the bottom border of the header in sticky mode.
Header Start Tour Link ColorSets 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 ColorSets the background color for the whole header.
Navigation Background ColorSets the background color for the header navigation element. On small devices, the navigation will be shown as a dropdown menu.
Navigation Text ColorSets the text color of the header navigation links.
Search Form Input Background ColorSets the search field background color.
Search Form Input Text ColorSets the placeholder and text color of the search field.
Toolbar Background ColorSets the header toolbar background color.
Toolbar Text ColorSets the text color of toolbar tagline and date
Toolbar Link ColorSets the link text color for the toolbar phone number, subscribe and login form
Toolbar Social Icon ColorSets 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:

1From the WordPress left menu, go to Theme Options > Main Content > Layout & Backgrounds.

Configuring header type - Layout and Backgrounds

2In the Background Color & Texture settings, click on Header.

Configuring header type - Edit header

3In Edit Color & Texture – Header, configure the background color, image and other settings as required. For this example, we’ll set a background image and enable the Cover Whole Background setting.

Setting Description

Background RepeatDefines how the background image is repeated. By default, it repeats both vertically and horizontally.
Background AttachmentDetermines 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 PositionSets the starting position of the background image. By default, the position is the top-left corner of the element.
Cover Whole BackgroundSets the background-size CSS property to fill the whole container.
Background ColorSets the background color of the header.
Background ImageSets the background image of the header.

4Click on Apply then click Save Settings and check the result.

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:

1Create or edit an existing page.
2From the Jupiter Styling Options box, enable Override Global Settings. New settings will be visible.

Configuring header type - Override Global Settings

3From the Background Color & Texture setting, click on Header and follow the third step from the above section. The only difference is the Enable Parallax Effect setting which allows you to enable parallax for the header background image.

Configuring header type - Header

4Click on Publish or Update to check the result.
Did this answer your question?