Creating Mega Menu using JetMenu plugin in Jupiter X

How to create a mega menu with JetMenu plugin bundled in Jupiter X

JetMenu is a plugin that allows you to create and style up mega menu. You’ll be able to create content for the menu items and customize items appearance, add menu badges and icons, change menu item background.

The plugin works with Elementor page builder, allowing to add content to menu items in a drag-and-drop way. You’ll also get Vertical Mega Menu and Mega Menu widgets for Elementor, which allow you to add a menu to any page section.

Note: Creating a mega menu you will use the Elementor page builder, and it will be displayed instead of the submenu items. The default submenu will be disabled as it will be replaced by the Mega Menu content. So you’ll be able to add any Elementor widget to your sub menu and create any content you want.


To create mega menu, follow the steps below:

1. Go to Jupiter X > Control Panel > Plugins and activate JetMenu plugin.

2. Go to Appearance > Menus and create your Primary menu.

Note: If you want to add some menu items in the mega menu, it’s recommended to create other custom menus in Appearance > Menus. You’ll be able to add them to your mega menu using Custom Menu widget in Elementor.


3. In JetMenu Settings, set “Enable JetMenu for current location” to Yes and save the changes.

4. Hover over the menu item for which you want to create a mega menu and you’ll see JetMenu blue button. Click on it to start building the mega menu.


5.
 Once you clicked on this blue button, you’ll see a popup where you need set “Mega Submenu Enabled” option to Yes and then click on the button Edit Mega Menu Item Content.

6. Now you can add any content to your mega submenu. For example, we’ll add custom menus with product items into several columns and some headings separated by dividers at the top.

Note: You can add any widget from Elementor to the mega menu (video, posts, etc.). Read more about Mega Menu customization in JetMenu documentation.


7. You can also edit general settings from the Dashboard left side in the JetMenu item. More information about these settings can be found here.

JetMenu widgets


There are two widgets from JetMenu you can use in Elementor to be able to add to any section on a page:

  • Vertical Mega Menu Widget
  • Mega Menu Widget

With Vertical Mega Menu widget you can add menu to the website’s page using Elementor page builder. There are also multiple menu customization options for this content module. 
The same is related to Mega Menu widget, the difference is it only adds horizontal menu to a page.

Note: You can change the JetMenu widgets style the same way you did it when customizing the simple menu style, using JetMenu style and content settings. To access them click JetMenu tab in the left side of the Dashboard.


Read more about JetMenu widgets settings in this documentation.

Creating a Sticky Header

How to create a sticky header

The process of creating a sticky header is the same as creating a normal header, the only difference is that it needs to be assigned as Sticky header in the customizer or page options.

Assigning Global Sticky Header

1. From WordPress left menu, go to Appearance > Customize.

2. From the Customizer left dashboard, go to Header.

3. For Behavior select Sticky.

4. A new My Templates option below will appear. Select your sticky header template from there.

5. Save the changes and Publish.

Editing Custom Sticky Header via Customizer

There are options that allow you to edit custom sticky header template or create a new one without leaving the Customizer panel when editing header settings. 
When setting a Behavior type to Sticky, you’ll be able to select a template from the drop down list in My Templates setting or click on the “New” button to create a new sticky header template. The popup window will appear with the Elementor editor allowing you to create a new header.

If you selected the template from the drop down list, you can also edit it clicking on “Edit” button.

This way you won’t need to return to Elementor Templates and leave Customizer panel to be able to create or edit header template. Now it’s possible inside the Customizer > Header

Assigning a Page Specific Sticky Header


Note:Post Options
 section will appear on the page backend only after you install the plugin Advanced Custom Fields PRO. It’s bundled with Jupiter X and can be installed via Jupiter X > Plugins as described in this article.

1. From the WordPress left menu, go to Pages and enter the page where you wish to assign your sticky header to.

2. From the Post Options, click on Header.

3. As Type, select Custom and next to that select your header Template.

4. As Behavior select Sticky and next to that select your sticky header Template.

5. Publish or Update the page.

Assigning a custom header to a specific page

How to assign header to a specific page only

After creating your header, you can assign it only to a specific page or pages:


Note: Post Options section will appear on the page backend only after you install the plugin Advanced Custom Fields PRO. It’s bundled with Jupiter X and can be installed via Jupiter X > Control Panel > Plugins as described in this article.

1. From the WordPress left menu, go to Pages and enter the page where you wish to assign your header to.

2. From the Page Options, click on Header.

3. As Type, select Custom and below that select your header Template.

4. Publish or Update the page.

Note: You can use Default Header but it has limited settings and styles rather than the header that you create with Elementor.


Assigning the Header Globally

How to assign the header for all pages globally

After creating your header, you can assign it globally to all pages at once:

1. From the WordPress left menu, go to Appearance > Customize.

2. From the Customizer left dashboard, click on Header.

3. For the Header Type, select Custom and select your header Template below.

4. Click on Close and Publish the changes.

Note: You can use Default Header but it has limited settings and styles rather than the header that you create with Elementor.

If you want to assign custom header to a specific page only, please refer to this article.

Using the built-in header in Jupiter X

How to use and configure built-in header in Jupiter X?

Jupiter X theme lets you use a default customizer header or create a new custom header from scratch using Elementor.

Difference Between Default Customizer Header and Custom Elementor Header

Simply put, the default customizer header has limited options and styles while the custom Elementor header has pretty much unlimited customization because of it’s widgets. This means that you will be able to add any Elementor element to the header: buttons, images, headings, icons, etc.

Built-in header provides the style of header 1 in Jupiter V6. Customizer header feature is a great way to quickly create a simple header to use on your website. However, if you are looking for some specific header design, Elementor will allow you to do that.

Using the built-in header in Jupiter X

1. From the WordPress left menu, go to Jupiter X > Customize.

2. From the Customizer left dashboard, click on Header.

3. A new panel will show up with the header customization settings. For the header Type, select Default.

Here are the most important options which you can find to customize your default header:

Behavior: You can have a regular header (Static) or change it to Fixed.
Overlap Content: By enabling this option, the header will overlap the content, so you’ll have a transparent header.
Align: Set the left or right alignment of the header. If you create an RTL site, you may want to have your header right aligned and this option will be helpful.
Full Width: Enabling this option, the header content is stretched to full width and not to the container width.
Display Elements: In this section, you have options to hide/show elements in the header like Logo, Search form, Menu, and Shopping Cart.

4. From Styles tab, you can change each component’s styles by clicking on the Customize button.

5. After all the customizations, close the options panel and Publish the changes.


If you want to set a background to the built-in header, it can be added by following the steps below:

1. From the WordPress left dashboard menu, go to Appearance > Customize.

2. From the Customizer left dashboard, go to the Header menu.

3. In the Styles tab, click on Container.

4. Now you can set a color for the background of your header.

5. Click on x, close the Header window and then Publish the settings.

Creating a Custom Header in Jupiter X using Elementor

Jupiter X theme lets you use a default customizer header or create a new custom header from scratch using Elementor. The process of creating a header using Elementor includes creating a header template and assigning it to a page. Creating the header using Elementor allows you to use all of the Elementor elements, allowing you to have a highly customized header.

Caution: You need Raven plugin to be installed and activated among the bundled plugins to be able to use the Custom Header and Footer feature with Elementor free edition. 

Difference Between Default Customizer Header and Custom Elementor Header

Simply put, the default customizer header has limited options and styles while the custom Elementor header has pretty much unlimited customization because of it’s widgets. This means that you will be able to add any Elementor element to the header: buttons, images, headings, icons, etc.

Customizer header feature is a great way to quickly create a simple header to use on your website. However, if you are looking for some specific header design, Elementor will allow you to do that.

Using a custom header in your website

To use a custom header in your website, you must:

  • Create your custom header in Elementor
  • Assign it to all pages on your website or to a specific page.

We will describe them step by step.

Creating a new Custom Header in Elementor


Note:
 Adding a new custom header in Jupiter X, can be only done with the Elementor plugin. To learn how to install it, check out this article.

1. From the WordPress left menu, click on Templates and go to Saved Templates menu.

2. Next to My Templates title, click on the Add New button.


3. 
For the template type select Header and give your header a name and click on the Create Template button.


4. 
You will now be redirected to Elementor page editor where you can choose a header template from the library or create your new header from scratch using Elementor. Some of the pre-made headers are part of Elementor Pro and in order to use them, you need purchase Elementor Pro first. You can also use the Jupiter X pre-made templates. Those templates are free. 
To see the Jupiter X templates, simply click on Jupiter X.  You can use your preferable template by clicking on Insert button.

If you don’t want to use pre-made templates and plan to create your custom header from scratch, simply click on x icon. That will redirect you to the Elementor page editor.


5. If you’re using a pre-made template, you can customize it or add new widgets to it.  In order to customize a brand new header (without using a pre-made template), first determine how many columns you need for your header template. Then add your desired Elementor’s widgets to it such as Site Logo and Navigation Menu.

6. Publish the template after your customization.

Warning!  

In case you are using Elementor Pro for header template with Display Conditions, some of the Jupiter X header customizations may not work properly and to fix that :

1. Make sure the Display Conditions are not provided for your header templates.

Just save a template without conditions. 

2. Make sure the Sticky option under Scrolling Effect is set to None in the Advanced settings of the Section container in your header template.

Assigning the Custom Header to your Website

After creating the custom header, you must assign it to your website. To do that please follow the steps below:

1. From the WordPress left menu, go to Jupiter X > Customize.


2. From the Customizer left dashboard, click on Header.


3. For the Header Type, select Custom and assign your header from My Templates. Be noticed, Styles tab only works if you have a Default header. In case you have a Custom header, you should change its style only via Elementor.

4. Click on Close and Publish the changes.


Editing Custom Header via Customizer

There are options that allow you to edit custom header template or create a new one without leaving the Customizer panel when editing header settings. 
When setting header type to Custom, you’ll be able to select a template from the drop down list in My Templates setting or click on the “New” button to create a new header template. The popup window will appear with Elementor editor allowing you to create  a new header.

If you selected the template from the drop down list, you can also edit it clicking on “Edit” button.

This way you won’t need to return to Elementor Templates and leave Customizer panel to be able to create or edit header template. Now it’s possible inside the Customizer > Header

Note: You can also assign the custom header to a specific page only, please refer to this article to learn more about it.

There are Elementor and Jupiter X header templates available which you can import into your header and also customize the default settings.



If you want to create a header toolbar, this article describes the process.
To create a transparent header, which overlaps the content, read the article Creating a transparent header.

In case you’re not creating a custom header, but editing built-in header, to find how to set background for this header, refer to the article.

To be able to add a logo to your custom header, read the article Adding multiple versions of the logo.

Header Builder – Creating a Page Specific Header

Header Builder lets you easily create and assign a header specific to a page. Before proceeding to this article, it’s good to read the Header Management article.

In this article we’ll explain how to create a page specific header.


Activating the Header Builder

By default, the Header Builder is disabled. To learn how to activate it, check out this article.


Creating a Page Specific Header

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

page specific header

2From the left side, click on the Header Management (first icon).

page specific header

3From the Header Management tab, click on the New Header button.

page specific header

4Give your header a nice name and click on Ok.

page specific header

5Create your desired header using the Header Builder and proceed to the steps below.

6Click on the Save button.

page specific header

7From the WordPress left menu, go to Pages and edit the page where you wish to assign your header to.

page specific header

8Scroll down to Jupiter Styling Options and enable the Override Global Settings.

page specific header

9From the Header option, select a header which you wish to assign to this page.

page specific header

10Publish or Update the page.

Header Builder – Header Management

Header builder makes it easy to manage with your headers – it lets you create, delete and duplicate headers with ease. Using this feature it is possible to assign a global header and create different headers for specific pages.

 

In this article we’ll explain how to access and use header management. To learn how to create a header for the specific page, check out 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.


Header Management

To access the header management:

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

header management

2From the left side, click on the Header Management (first icon).

header management

3A new tab will open with the list of your active and inactive headers.

header management

From here, you can create, delete, duplicate and rename your headers.


Creating a New Header

1From the header management tab, click on the New Header button.

header management

2Give your header a nice name and click on Ok.

header management


Creating a Global Header

1From the header management tab, select a header which you wish to make global and click on Open.

header management

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

header management

3Click on Make this header global.

header management

4Click on the Save button


Creating a Page Specific Header

To learn how to create a page specific header using the header builder, check out this article.

Header Builder – Making Tablet & Mobile Header

Header Builder provides a feature to create a header for specific devices – desktop, tablet and mobile. In this article, we’ll explain how to use header builder to make a tablet & mobile header.


Activating the Header Builder

By default, the Header Builder is disabled. To learn how to activate it, check out this article.


Making Tablet & Mobile Header

To create a header specific to these devices:

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

tablet & mobile header

2From the top, click on the tablet icon.

tablet & mobile header

3Add elements to create a tablet specific header.

tablet & mobile header

4From the top, click on the mobile icon.

tablet & mobile header

You will notice that the tablet elements are also applied in the mobile header. You may change these elements to configure the header for mobile, without affecting the tablet header.

tablet & mobile header

5Click on Save and check your website on tablet and mobile device to see the two different headers.

tablet & mobile header

If you have any questions regarding Header Builder, please contact our support team creating a ticket via your Artbees Dashboard.

Header Builder – Making a Sticky Header

Header Builder provides a feature to create a sticky header – when a visitors scrolls down the page, a new (sticky) header will slide down, hiding the initial header. The sticky header can help to make it easier for visitors to navigate through a site as they can quickly access the navigation menu rather than having to scroll back to the top of the page.

 

In this article we’ll explain how to create a sticky header using the header builder.


Activating the Header Builder

By default, the Header Builder is disabled. To learn how to activate it, check out this article.


Making a Sticky Header

To create a sticky header using the Header Builder:

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

sticky header

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

sticky header

3Enable the Sticky Header option and configure the settings as required.

sticky header

SettingDescription

Sticky Header Offset Decides when the header goes into the sticky header state.
Sticky Header Behaviour Sets how the sticky header is going to behave.

4Close the settings tab and click on Sticky Header.

sticky header

5Add elements to create your sticky header.

sticky header

6Click on View to preview the changes.

sticky header

Configuring Header Structure

Theme Settings is the main section of Ken, from which you can establish global settings for your website. In this article, we will describe the options available for configuring Header structure.

To access the header settings, from WordPress top bar, go to Theme Settings > Header.

configuring header


Configuring Header Structure

Setting Description

Header Structure This is the primary option used to define the type of header structure you want for the site. The options available are Full Screen, Standard, Margin and Vertical.

Based on the chosen Header Structure, you will see other options. Below sections will define the other options available.


Options Similar Across Every Header Structure Type

This section defines all the options which are available for every Header Structure type.

Setting Description

Header Padding (Top & Bottom) Using this option you can increase or decrease the header padding from the top and the bottom. The default value for this option is 30px.
Boxed Header Enable this option to limit the header content into a box. If you want the header content to be stretched screen wide, disable this option.
Sticky Header Use this option to enable or disable the sticky header. Enabling this option will make header stay at the top of the browser while scrolling down.
Squeeze Sticky Header This option will give you the control on whether to squeeze the sticky header or keep it the same height as none-sticky.
Show Header Border Top? Enable this option to show a border at the top of the header.
Show Header Border Bottom? Enable this option to show a border at the bottom of the header.
Header Search Form Enable this option to show a search form. The search form will be placed on the right side of the main navigation.
Header Wpml Language Selector Enable this option to show the WPML language selector in the header.
Page Title : Pages If you don’t want to show page title section (title, breadcrumb) in Pages disable this option. this option will not affect archive, search, 404, category templates as well as blog and portfolio single posts.
Main Navigation for Logged In User Please choose the menu location that you would like to show as global main navigation for logged in users. You should first create a menu and then assign to menu locations.
Header Social Networks This option is used to define the place of the Social icons in the header. The options available are Header Section and Header Toolbar (at the top of the main header section). You can also choose disabled in case you do not wish to show any social icons. In case, you choose to show the social icons, you will be able to see a list of the social icons at the bottom of this option.
Header Toolbar Enable this option to show the Header Toolbar.
Show/Hide Header in Mobile Devices Using this option you can show or hide the header on the mobile devices. Mobile devices are the devices which have smaller screen size than 767px.


Extra Options Only Available for Full Screen Header Structure Type

Apart from the options available for all the header structure types, full screen header structure type comes in with some more options defined below.

Setting Description

Full Screen Overlay Mode Alignment This option lets you align the elements in the full screen overlay mode. The options available are Left, Center and Right.
Full Screen Custom Logo This option lets you choose a different logo than the global logo for full screen mode.
Full Screen Header Menu Typography This option lets you configure the typography for the full screen menu items. Here you can configure the Font Family, Font Weight & Style, Text Alignment, Font Size, Line Height and Font Color.
Full Screen Header Overlay BG Color This option lets you choose the background color of the full screen overlay.
Full Screen Header Overlay Opacity This option lets you set the opacity of the full screen overlay.
Full Screen Header Overlay BG Image This option lets you add an image for the full screen overlay.
Full Screen Header Link Hover Color This option lets you choose the hover color for the full screen menu items.
Full Screen Header Link Background Hover Color This option lets you choose the background hover color for the full screen menu items.
Full Screen Header Close Button Color This option lets you choose the color for the full screen close icon.
Full Screen Header Burger Icon Color This option lets you choose the color for the full screen burger icon.


Extra Options Only Available for Standard Header Structure Type

Apart from the options available for all the header structure types, standard header structure type comes in with some more options defined below.

Setting Description

Header Location This option lets you choose whether the header will be placed at the top of the page or at the bottom of the page.


Extra Options Only Available for Vertical Header Structure Type

Apart from the options available for all the header structure types, vertical header structure type comes in with some more options defined below.

Setting Description

Vertical Header State This option lets you choose the initial state of the vertical header. The 2 options available Expandable and Always Open. If the Expandable header is chosen, then the header will be hidden by default and by clicking the burger icon it will expand to reveal the logo and the navigation.
Vertical Header Align This option lets you choose the side of the page to show the vertical header. You can either choose Right or Left.
Header Vertical Width? This option lets you choose the width of the vertical header. The default value for this option is 280px.
Header Padding (Left-Right) Using this option you can increase or decrease header padding from the top and the bottom. The default value for this option is 30px.
Vertical Header Menu Align This option lets you align the menu inside the vertical header. The options available are Left, Center and Right.


Extra Option Only Available for Some Header Structure Types

Finally, the below option is available for some header structure types but not for all.

Setting Description

Header Align This option lets you align the elements of the header. The available optionsare Left, Center and Right. This option is available for all the header structure types except for the vertical header structure type.

 

Activating the Header Builder

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 activate the header builder since it’s disabled by default


Activating Header Builder

1From the WordPress left menu, go to Jupiter > Theme Options > Header.
2Click on Header Builder.
3A warning message pop-up will appear. Click on Agree.
4Click on the Save Settings button.
5Access the header builder from the WordPress left menu, Jupiter > Header Builder.
6 Then you will see the Header Builder Editor appear.

Header Builder – Adding Social Networks

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 display social networks in your header using the header builder.


Activating the Header Builder

By default, the header builder is disabled. To learn how to activate it, check out this article.


Adding Social Networks

Since the Header Builder lets you create flawless layouts for your website using drag & drop editor, adding social networks is easy as dragging it to the header and styling it as you like:

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

2Click on the related icon to open the list of elements.

3From the elements panel, drag Social Media into the header.

adding social networks

4From the “Add Social Network” option add your social network and the URL.

adding social networks

5Style the social networks icons from the Style pane.

adding social networks

6Click on Preview to see the changes made.

Header Builder – Customizing Shopping Cart Icon

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 customize the shopping cart icon.

shopping cart icon


Activating the Header Builder

By default, the Header Builder is disabled. To learn how to activate it, check out this article.


Adding the Shopping Cart Icon

Since the Header Builder lets you create flawless layouts for your website using drag & drop, adding a shopping cart icon is as easy as dragging it to the header and styling it as you like:

1From the left panel, click on the Elements icon.

shopping cart icon
2Drag the shopping icon into the header.

shopping cart icon
3Style the button from the Style pane in the right.

shopping cart icon

4Hit preview to see the changes.


Customizing the Shopping Cart Icon

You can customize the shopping cart icon after you have added it to the header builder.

1Click on the shopping icon to show the settings on the right panel.

The customization options available for the shopping cart icon are Properties, Style and Layout which are explained as follows:

Properties

SettingDescription

Align Lets you align the icon. Available options are left, center, right and no alignment.
Make Inline Helps you set your icon along side of the other element or below it. Available option are enable and disable.

Style

SettingDescription

Select icon Gives you an option to choose from eight different styles of shopping card icon.
Icon Size Lets you set icon size in pixel.
Icon color Allow you to choose an icon color using the color picker.
Hover Settings Allow you to choose a hover color using the color picker.

Layout

Margin/Padding: It adds padding and margin to the row. You can specify all the 8 values individually.

Visibility on Devices

This option lets you toggle the devices options on the desktop, tablet and mobile and decide whether to show your shopping cart option or not.

Header Builder – Creating Secondary Navigation

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 add a secondary navigation to your header using the Header Builder.


Activating the Header Builder

By default, the Header Builder is disabled. To learn how to activate it, check out this article.


Adding a Secondary Navigation

Since the Header Builder lets you create flawless layouts for your website using drag & drop, all you have to do to add a secondary navigation is drag it to the header and style it as you like:

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

2Click on the related elements icon to open the list of elements.

3From the Elements pane, drag Navigation into the header.

Secondary Navigation

4From the Properties pane set the Nav Style to Burger Style.

Secondary Navigation

5From the Properties pane choose the menu you wish to have as a secondary menu.

Secondary Navigation

6Align your secondary navigation to right (or left). If you want to use it in the same place as the primary navigation (which is another navigation shortcode) make sure to check the “inline” property of both shortcodes. 

7Style the Navigation from the Style pane in the right.

8Hit Preview to see the changes.


Header Builder – Adding a Callout Button

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 add a callout button to your header using the header builder.


Activating the Header Builder

By default, the Header Builder is disabled. To learn how to activate it, check out this article.


Adding a Callout Button

Since the Header Builder lets you create flawless layouts for your website using drag & drop, adding a callout button is as easy as dragging it to the header and styling it as you like:

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

adding a callout button

2Click on the related elements icon to open the list of elements.

3From the Elements pane, drag a Button into the header.

adding a callout button

4Style the button and provide your text and URL for it in the Properties pane.

adding a callout button

adding a callout button

5Style the button from the Style pane in the right.

6Hit Preview to see the changes.


Previously, when you wanted to create a callout menu, you needed to create it using a custom menu class in your main navigation. But in the header builder, you can create and place the button wherever you like. To see the old method in adding a callout button to your header, please follow this article.

Header Builder – Header Templates

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 addition to customizing the header, the Header Builder also provides predefined header templates to use as a base and get you started with your header customization.

In this article we’ll explain how to use the predefined header templates 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.


Adding a Template

The templates tab can be found on the left:

header templates

Clicking on the Templates tab will show a preview of available templates. Hovering over the template will display a bigger preview of the header. Click the one you like to add it. Note that it will replace the existing customization if you have any. After you have added a template you can add or remove elements to customize it.

Header Builder – Header Settings

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.

Header Builder – Responsive States

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 use responsive states and configure your header on different devices.


Activating the Header Builder

By default, the Header Builder is disabled. To learn how to activate it, check out this article.


Configuring the Header for Different Devices

To access the header builder:

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

responsive states

Header builder provides three different responsive states related to the screen width. Use the header responsive states to create and improve the header appearance on different devices such as desktop, tablet, and mobile.

responsive states

By clicking on one of the devices, you will be able to create a header that will be displayed only on that specific device.

responsive states

If you have any questions regarding responsive states in header builder, please contact our support creating a ticket in your Artbees Dashboard.

Header Builder

Header builder is a new feature introduced to Jupiter which lets you create and modify your website header using a visual drag & drop editor


Activating the Header Builder

To activate the header builder:

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

2Click on Header Builder.

3A warning message pop-up will appear. Click on Agree.

4Click on the Save Settings button.

5Access the header builder from the WordPress left menu, Jupiter > Header Builder.


Header Elements

Click on the related “+” button to open the list of elements.

Drag & Drop Editor

Header builder provides a visual drag & drop editor which lets you simply drag header elements and drop them into a desired place on your header.

Element Settings

Adding an element to the header lets you access its settings.

1Click on an element inside the header area.

2A new panel will open on the right side of the page with the element specific settings.

 

3Configure the settings.

Header Settings

Click on the related “cog” icon to open the header settings.

A new panel will open with the list of settings:

SettingDescription

Fixed Header (Desktop & Laptop) Creates a fixed header only for desktop and laptop devices.
Fixed Header (Tablet & Phone) Creates a fixed header only for tabled and phone devices.
Sticky Header Enables sticky header.
Sticky Header Offset Decides when the header goes into the sticky header state.
Sticky Header Behaviour Sets how a sticky header is going to behave. Available options are slide down and lazy.

Sticky Header

Header builder lets you create a separate sticky header which can be different from your default header. Sticky header will “stick” to the top of your website upon scrolling down.

To create a sticky header:

1From the Header Settings, enable Sticky Header.

2Click on the Sticky Header and add your elements.

Header Responsive States

Header builder provides three different responsive states related to the screen width. Use the header responsive states to create and improve the header appearance on different devices such as desktop, tablet, and mobile.

By clicking on one of the devices, you will be able to create a header that will be displayed only on that specific device.


Previewing the Changes

It is possible to preview the elements and the changes you’ve made to you the header before actually applying them to the front end of your website.

Previewing the Elements

To preview how a specific element is going to look in the header:

1Click on an element inside the header area.

2A new panel will open on the right side of the page with the elements settings. Click on Preview.

3A new window will pop up with the preview of the element.

Previewing the Header

To preview the whole header:

1Click on the Preview button in the top right corner of the page.

2A new tab will open in your browser where you can check the header changes.


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.

Configuring the Search Box

The search box is a rectangular field that lets users type in a text in order to search for information on your website. After the user types a text and clicks the search button, the system searches the database and gathers the information that is related to the specified terms that the user searched for. Therefore it is better to use the search box if you have a website that has a large amount of content.

In this article you will find some information about displaying the search box in different areas of the website, and configuring the design and search results.

To see the search box in action, check out the demo page.


Displaying the Search Box

You can display the search box in various areas of the Jupiter theme. It can be in the header area or in a widget area. The design and type of the search box can be changed according to the placement you selected.

Displaying in the Header Area

To display the search box:

1Go to Theme Options > Header.

Configuring search box - Header

2Select the desired location in the Search Form In Header menu in order dropdown to display the search box.

The search box will have a different style and type according to the selected location. Below are some details about how search box will look in each area.

Setting Description

Header Toolbar  Displays the search box as a text field in the header toolbar area.
Header Main Area  Displays the search box as a text field in the main header area.
Inside Main Navigation With Tooltip Adds a search icon to the main navigation. The search box displays in a tooltip that triggered by a click on the search icon.
Inside Main Navigation With Fullscreen Layer Adds a search icon to the main navigation. The search box displays in a fullscreen layer that is triggered by a click on the search icon.

3Click on Save Settings.

Displaying in the Widget Area

1Go to Appearance > Widgets.

Configuring search box - Widgets

2Find the Search element and drag and drop it into the widget area where you want it to be shown.

Configuring search box - Search widget


Configuring the Design

Configuring the design options lets you change the background and input text colors for the search box.

To configure the search box design:

1Go to Theme Options > Header Toolbar.

Configuring search box - Header toolbar

2There are some options regarding the search box design on this page. Configure your search box settings according to your needs.

Setting Description

Search Form Input Background Color Sets the search box background color.
Search Form Input Text Color Sets the search box input text color.

3Click on Save Settings.


Configuring the Search Results

Jupiter lets you configure the search results page options such as layout, page title and subtitle.

To configure the search results page options:

1Go to Theme Options > Search.

Configuring search box - Search

2The page has some options regarding the search results page. Configure your search results page settings according to your needs.

Setting Description

Search Layout Sets the search results page layout as full width without the sidebar left sidebar or right sidebar.
Search Page Title Sets the search results page title.
Search Page Subtitle Enables the search results page subtitle.

3Click on Save Settings.

Configuring the Page Title

The Page Title is the name or heading of a page. It explains the entire concept which is described in the page content. It is also very important for search engines because a title helps users find your website easily.

In this article, you will find some information about enabling or disabling the page title, as well as configuring its design and typography.


Enabling or Disabling the Page Title

By default, page titles are enabled on all the pages and blog posts. It is possible to disable the page titles globally or only for specific pages and blog posts.

To enable or disable the page title globally:

1Go to Theme Options > Page Title.

Configuring page title - Page Title

2Enable or disable the Display Page Title option according to your needs.

Configuring page title - display page title

3Click on Save Settings.

To enable or disable the page title for a specific page:

1Edit or create a new page.

2Under the Jupiter Page Options section, select Remove Page Title to remove it in Manage Page Elements setting, or set it to the Select option to enable it according to your needs.

Configuring page title - remove page title

3Update or Publish the page.


Configuring Page Title

The Page Title options let you configure the visibility of the page title and the alignment. Also, Jupiter lets you set the custom page title and page heading subtitle.

To add or change the page title:

1Edit or Create a new page.

2Add or change the current page title.

3There are some options regarding the page title in the Jupiter Page Options section. Configure your page title settings according to your needs.

Setting Description

Manage Page Elements Sets the page elements visibility. You can disable the page title by selecting the Remove Page Title option.
Page Title Align Sets the page title alignment.
Custom Page Title Sets a custom page title. This option does not effect or change the title which is between tags inside HTML.
Page Heading Subtitle Sets the page heading subtitle. The value displays in below the page title.

4Click Update or Publish.

Configuring Page Title for Archive

1Go to Theme Options > Blog > Blog Archive.

Configuring page title - Blog Archive

2This page has some options regarding the page title. Configure your page title settings according to your needs.

Setting Description

Archive Page Title Sets the page title for archive
Archive Page Subtitle Enables the page subtitle for archive

3Click on Save Settings.

Configuring Page Title for Search

1Go to Theme Options > Search.

Configuring page title - Search

2This page has some options regarding the page title. Configure your page title settings according to your needs.

Setting Description

Search Page Title Sets the page title for search
Search Page Subtitle Enables the page subtitle for search

3Click on Save Settings.

Configuring Page Title for E-commerce

1Go to Theme Options > Shop > General.

Configuring page title - Shop

2This page has some options regarding the page title. Configure your page title settings according to your needs.

Setting Description

Product Category Archive Loop Title Sets the page title for product category archive.
Use Product Category Name As Page Title Sets the page title as a product category name.
Use Product Name As Page Title Sets the page title as a product name.
Single Product Page Title Enables the page title for single product pages.

3Click Save Settings.


Configuring the Design

There are some options regarding page title configuration and page subtitle design, such as text color, shadow and border color.

To configure the page title design for only a specific page:

1Edit or Create a new page.

2In the Jupiter Styling Options section, enable the Override Global Settings option to display other settings.

There are some options regarding the page title design in the Jupiter Styling Options section. Configure your page title design settings according to your needs.

Setting Description

Page Title Color Sets the page title color.
Page Subtitle Color Sets the page subtitle color.

3Click Update or Publish.

To configure the page title design globally:

1Go to Theme Options > Page Title.

Configuring page title - page title

2This page has some options regarding the page title design. Configure your page title design settings according to your needs.

Setting Description

Page Title Color Sets the page title color.
Text Shadow For Title?  Sets the page title shadow. If you enable this option, a 1px gray shadow will appear the in page title.
Page Subtitle Color  Sets the page subtitle color.
Page Title Border Bottom Color Sets the page title’s bottom border color.

3Click on Save Settings.


Changing the Height

By default, there is no option to change the Page Title height. As a workaround, you may do this via custom CSS.

To change the page title height:

1From the WordPress left menu, go to Jupiter > Theme Options > Advanced > Custom CSS.

2Paste the following codes:

#mk-page-introduce {
    padding: 15px 0 !important;
}

3Change the 15px value to achieve your desired height.

4Click on Save Settings.


Configuring the Typography

Typography options gives you the power to configure things such as text size, spacing, weight and case in the page title.

To configure the page title typography:

1Go to Theme Options > Page Title.

Configuring page title - page title

2This page has some options regarding the page title typography. Configure your page title typography settings according to your needs.

Setting Description

Page Title Size Sets the page title size. The value must be in pixels.
Page Title Letter Spacing Sets the page title spacing between letters. The value must be in pixels.
Page Title Weight Sets the page title weight options such as light, normal, bold, bolder etc.
Page Title Text Case Sets the page title case options such as uppercase, lowercase and capitalize.
Show Page Title Sets the page title visibility.
Page Subtitle Size Sets the page subtitle size. The value must be in pixels.
Page Subtitle Text Case Sets the page subtitle case options such as uppercase, lowercase and capitalize.

3Click on Save Settings.

Configuring Toolbar

The Toolbar or Header toolbar is a horizontal row that is placed at top of the header. The toolbar is designed to display contents that can be useful for users. In the toolbar, you can display the date, slogan, contact details, subscribe form, login form or quick access links for social networks.

In this article you will find detailed information and instructions about configuring toolbar, the toolbar elements and their design.


Enabling or Disabling the Toolbar

The toolbar is enabled by default when Jupiter is installed without any template. It is possible to enable or disable the toolbar in Jupiter.

To enable or disable the toolbar:

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

2From the Header Styles setting, enable or disable the toolbar by selecting the ON or OFF button.

Configuring toolbar - Header styles

3Click on Save Settings.

Making the Toolbar Visible on Small Devices

To make the toolbar visible on small devices such as mobile phones or tablets:

1From the WordPress left menu, go to Theme Options > Advanced > Custom CSS.

2Copy the code below and paste it into the Custom CSS field.

@media handheld, only screen and (max-width: 768px) {
.mk-header-toolbar {
display: block!important;
}
.mk-toolbar-resposnive-icon {
display:none;
}
}

3Click on the Save Settings button.

Rotate the toggle arrow of header toolbar on mobile while clicking

It can be done with some custom CSS and JS codes. To learn how to do it, check out this forum thread.


Configuring Toolbar

Making the Toolbar Sticky

There are two main steps to making a toolbar sticky. First is enabling the sticky header and the the second one is making the toolbar sticky with custom CSS.

To enable the sticky header:

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

2Select the Fixed Sticky option in the Sticky header behavior field.

Configuring toolbar - Sticky header behavior

3Click on Save Settings.

To make the toolbar sticky:

1From the WordPress left menu, go to Theme Options > Advanced > Custom CSS page.

2Copy the code below and paste it to the Custom CSS field.

.mk-header .mk-header-inner{
    top: 30px !important;
}
.a-sticky .mk-header-inner, .header-style-2.a-sticky .mk-classic-nav-bg {
    top: 60px !important;
}
 .mk-header-toolbar {
    position: fixed;
}
.a-sticky .mk-header-toolbar {
top: 30px;
}

3Click on Save Settings.

Setting custom height for the toolbar

If you want to change the toolbar height, you can do this with custom css code easily.

1From the WordPress left menu, go to Theme Options > Advanced > Custom CSS.

2Copy the code below and paste it to the Custom CSS field.

.mk-header-toolbar {
    height: 55px !important;
    line-height: 55px !important;
}

Value of 55px is just an example, you can change it to any value you need.

3Click on Save Settings.


Configuring Toolbar Elements

The toolbar consists of eight elements. By default, when no template is installed only the Login form is enabled. Configuring most of the elements is easy but some of them need instructions.

To enable or disable the toolbar elements:

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

2On this page, you can configure six elements.

Setting Description

Toolbar Date Displays the date. Your server should have the correct settings for the date, otherwise contact your hosting provider. It’s not possible to change the default date format.
Toolbar Tagline Displays a simple text.
Phone Number Displays a phone number as a link. Only one number is allowed.
Email Address Displays an email address as a link. Only one email is allowed.
Show Login Form Displays a login link which shows a dropdown login form upon click. Note that the functionality of this form is limited.
Show MailChimp Subscribe Form Sets if clicking the button will open a redirected page in the same window or a new one.

3Click on Save Changes and check the result.

Configuring the MailChimp Subscription Form

The Mailchimp subscription form is a great tool to collect your users or customers email addresses for marketing purposes. By integrating this form with your Mailchimp account, you can see all of your customer’s email address data that you collected in your Mailchimp dashboard.

There are two steps to configure the MailChimp subscription form. First you must find your MailChimp List ID, and then you can configure the settings for MailChimp subscription form.

To find your MailChimp List ID:

1Go to the MailChimp website and login.

2Click on Lists.

3Click on the drop-down menu icon next to the list that you want to integrate, and click on Settings.

4Find the List ID field. The value in this field is the list ID. Copy this List ID for future reference.

To configure the settings for the MailChimp subscription form:

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

2Enable the Show Mailchimp Subscribe Form option.

Configuring toolbar - Mailchimp subscribe form

3Paste the MailChimp List ID that you got from the first step into Theme Options > Global Settings > API Integrations.

Configuring toolbar - Mailchimp list ID

4Enable the Mailchimp Opt-In Email option if you want your subscribers to receive a Please Confirm Subscription email.

Configuring toolbar - Mailchimp Opt-in Email

5Click on Save Settings.

Configuring the Navigation Menu

It is possible to place a navigation menu in the header toolbar. You simply need to create a new menu or edit an existing menu, and then set the menu location to the header toolbar.

To place a navigation menu in the header toolbar:

1Go to Appearance > Menus.

Configuring toolbar - Menus page

2Select a menu from the Select A Menu to Edit drop-down field and click to Select, or create a new menu.

3Click the checkbox of the Header Toolbar Navigation option.

Configuring toolbar - Header toolbar navigation

4Click on Save Menu.

Configuring the Language Switcher

If you have a multilingual website that is configured with WPML plugin, the language switcher will be added automatically in the header toolbar.

Configuring the Search Form

In Jupiter, it is possible to add a search form to the header toolbar.

To add a search form to the header toolbar:

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

2Select the Header Toolbar option in the Search Form In Header field.

Configuring toolbar - Search form in header

3Click on Save Settings.

Configuring the Social Network Icons

Jupiter also lets you add quick links to social networks in the toolbar. This feature provides you with more than 40+ social media platform icons (such as Facebook, Twitter, Youtube, Vimeo, Xing, Linkedin etc) to display your social accounts in a visually appealing way.

To add the social network icons to the toolbar:

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

2Select the Header Toolbar option in the Header Social Networks Location field.

Configuring toolbar - Social Network

3Select your desired icon style in the Header Social Networks Style field.

Configuring toolbar - Social Network Style

4In the Add New Network section, add your social network links and click on Add New. Repeat this step for each social media link that you want to add.

5Click on Save Settings.


Configuring the Design

Jupiter lets you change some basic stylings of the toolbar via the theme’s control panel. By using these options you can change the color of background, border, texts, links, social network icons, form background color and form text color.

Configuring the Design for Desktop

To change the style and color of the toolbar:

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

2There are some options for the header toolbar design on this page. Configure your header toolbar settings according to your needs.

Setting Description

Background Color Sets the toolbar background color.
Search Form Input Background Color Sets the search form input background color.
Border Bottom Color Sets the bottom bottom color of the toolbar.
Text Color Sets the toolbar text color.
Link Color Sets the toolbar link color.
Search Form Input Text Color Sets the search form input text color.
Social Network Icon Color Sets the icon color.

3Click on Save Settings.

Configuring the Design for Mobile

To change the style and color of the toolbar:

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

2There are some options for the header toolbar design on this page. Configure your header toolbar settings according to your needs.

Setting Description

Toolbar Background Color Sets the toolbar background color.
Toolbar Text Color Sets the toolbar text color.
Toolbar Link Color Sets the toolbar link color.
Toolbar Social Icon Color Sets the icon color.

3Click on Save Settings.

If there are any questions, feel free to contact our support team.

Configuring Breadcrumbs

Breadcrumbs are a type of secondary horizontal navigation that display the user’s location on the website in a hierarchical way. It is especially important to use breadcrumb on big websites that contain a large amount of content in order to provide a better user experience.

In this article you can find information about disabling and enabling breadcrumb globally or only for a specific page, as well as configuring the breadcrumb design.


Disabling or Enabling Breadcrumbs

It is possible to enable or disable breadcrumb globally or only for a specific page.

To disable or enable breadcrumb globally:

1From the WordPress left menu, go to Theme Options > Page Title > Breadcrumbs.

Configuring breadcrumb - Breadcrumbs

2Enable or disable the Breadcrumbs option according to your needs.

Configuring breadcrumb - Display breadcrumbs

3Click on Save Settings.

Disabling or Enabling Breadcrumb for a Specific Page

To disable or enable breadcrumb for a specific page:

1Edit a page or create a new page.

2Under the Jupiter Page Options section, enable or disable the Breadcrumb option according to your needs.

Configuring breadcrumb - breadcrumb option

3Click on Update or Publish.


Configuring the Design

There is only one option related to the breadcrumb design in Jupiter.

To configure the breadcrumb design:

1From the WordPress left menu, go to Theme Options > Page Title > Breadcrumbs.

Configuring breadcrumb - breadcrumbs

2On this page, you can configure the breadcrumb design settings.

Setting Description

Text Skin Sets the breadcrumb skin. There are only two skin options: for a light background and for a dark background.

3Click on Save Settings.


Configuring Breadcrumbs with Yoast SEO Plugin

Besides the current options that Jupiter provides, You can use Yoast SEO plugin for further customization of breadcrumbs. Yoast Plugins provides you extra power to configure anchor text, separators between breadcrumb items and prefixes for global or specific pages such as the archive or search pages.

Installing the Yoast SEO Plugin

1Go to Plugins > Add New.

Configuring breadcrumb - Add new plugin

2Type Yoast SEO in the search field and click on Install Now.

Configuring breadcrumb - Install Yoast SEO

 

3Click on Activate.

Configuring breadcrumb - Activate Yoast SEO

Configuring Breadcrumb with the Yoast SEO Plugin

1From the WordPress left menu, go to SEO > Search Appearance.

2Click on the Breadcrumbs tab.

This page has some options for configuring breadcrumb. Configure your breadcrumb settings according to your needs.

Setting Description

Separator between breadcrumbs Sets the breadcrumb separator.
Anchor text for the Homepage Sets the breadcrumb anchor text for the homepage.
Prefix for the breadcrumb path Sets the breadcrumb path prefix.
Prefix for Archive breadcrumbs Sets the breadcrumb prefix for the archive page.
Prefix for Search Page breadcrumbs Sets the breadcrumb prefix for the search page.
Breadcrumb for 404 Page Sets the breadcrumbs for the 404 page.


3Click on Save Changes.

Configuring Favicons

Favicons are important so your website can be recognized in a browser full of tabs, as well as to generally improve user experience.

In this article we will cover the different types of favicons that Jupiter supports, and also how to generate and upload your own.

To see the favicon in action, check out the main demo Jupiter website


Different Types of Favicons

Jupiter let’s you use different types of favicons which will be then displayed on a specific device. Those types are listed below with their recommended sizes:

Type Description Sizes

Custom favicon Sets the default custom favicon for IE, Chrome, Firefox and Safari 16×16 & 32×32
Apple iPhone Icon Sets the icon for Apple iPhone 57×57
Apple iPhone Retina Icon Sets the icon for Apple iPhone Retina Version 120×120
Apple iPad Icon Upload Sets the icon for Apple iPad 76×76
Apple iPad Retina Icon Upload Sets the icon for Apple iPad Retina Version 152×152


Uploading Favicons

Uploading a favicon is fairly easy. Below we explain the whole process on how to generate and upload a specific favicon:

Generating a Favicon

1Go to the FaviconCC website.

2Choose a color and click on the squares to paint your logo.

Configuring favicons - FaviconCC

3Once done, click on Download Favicon.

Configuring favicons - Download Favicon

Here is a list of websites where you can generate your own favicon:

Uploading a Favicon

To upload your favicon:

1From the WordPress left menu, go to Theme Options > Global Settings > Logo & Title.

Configuring favicons - Logo and Title

2Upload the favicon from the Custom Favicon option.

Configuring favicons - Custom favicon

3Click on Save Settings.


Troubleshooting

  1. Favicon file must be in .ico or .png format.
  2. In case the favicon is not showing up, make sure to clear the browser cache or try incognito or private browsing.

Configuring Social Networks

Social networks are the platforms that connects people and companies with their customers and let them follow up on the latest news. Since they are advertising tools, lots of companies or personal websites display their social network accounts on their websites to attract new followers. That’s why the placement and design of these links are important in order to get the attention of new followers.

In this article, we’ll explain how to add social icons and configure their design and location in the header.


Adding Social Networks

To add social networks:

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

Configuring social networks - Header

2Under the Social Network section, select your social website in the Select a Site field and then enter the full URL to your site’s profile in the Enter Full URL field. 

Configuring social networks - Social network

3Click on the Add New button. Go to step 2 and repeat the process if you want to add more social networks.

4Click on Save Settings.


Configuring the Location

It is possible to display the social network icons in either the header toolbar or the header section.

To change the icon’s location:

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

Configuring social networks - Header

2Select the location of your icons in the Header Social Networks Location dropdown. This setting allows you to select toolbar, header or completely disable the icons.

Configuring social networks - social networks location

3Click on Save Settings.


Configuring the Design

Social network icons design type and colors can be changed easily in the Social Networks and Header Toolbar screens. To change the icon type and size:

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

Configuring social networks - header

2Select your icon type in the Header Social Networks Style dropdown and the size in the Icon Size dropdown.

Configuring social networks - social network style

3Click on Save Settings.

Configuring the Icon Color

There are two setting pages for customizing the colors depending on the location you selected for your icons.

To change icon color:

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

Configuring social networks - header

2Scroll down to the Social Networks section.

Configuring social networks - social network icons color

Setting Description

Icon Color Defines the icon color. It affects all icons types.
Icon Hover Color Defines the hover icon color. It affects all icon types.
Border Color Defines the border color of the Simple Rounded, Square Pointed & Square Rounded icon types.
Background Color Defines the background color of the Simple Rounded, Square Pointed & Square Rounded icon type.
Hover Background Color Defines the hover background color of the Simple Rounded, Square Pointed & Square Rounded icon types.

3Click on Save Settings and check the result.

 

If you want to have different color for each icon, you need use custom css code.

1From WordPress left menu go to Jupiter > Theme Options > Advanced > Custom CSS.

2Add this code in Custom CSS section:

.instagram-hover svg {
    fill: red;
}

.facebook-hover svg {
    fill: blue;
}

Change color values to any you want.

This code changes colors for Instagram and Facebook icons.

To edit more icons, use the same code, just change .facebook-hover class to the icon class you want to modify, for example, .twitter-hover or .pinterest-hover.

Configuring the Header

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

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 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.

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

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 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.

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.

Configuring Logos

A logo is a visual representation of your business. It reflects your company’s name, message and values. Over time, your logo should be immediately recognizable to your customers, which is why Jupiter offers a lot of options for logos.

There are several ways and places you can add and configure your logo. This article also covers the difference between the global and page specific logo.


Different Types of Logos

There are several logo types which are used in specific situations.

Type Description

Default & Dark Logo This logo will be used as your default logo, and when your header skin is dark.
Light Logo This logo will be used when the transparent header is enabled and your header skin is light.
Sticky Header Logo This logo will be used when the header is in a sticky state.
Mobile Version Logo This logo will be used on mobile devices.
Sub Footer Logo This logo will appear in the sub footer section.

SVG Logo

To upload and use a SVG logo:

1From the WordPress left menu, go to Theme Options > Global Settings > Site Settings then enable SVG Support.

2Save Theme Options and reload the page. Now you can upload SVG logo to media library. Read following sections to learn about uploading logo in different places.

Retina Logo

To have an appropriate none SVG logo for retina screens, you need to export/design your logo at 2x (2 times bigger than normal logo) then use the Width (beside each logo field) option to specify an appropriate value.

For example:

If you want to show your logo at 150×75 pixel in your site, you need to export/design a 300×150 pixel logo then set the width to 150.

It resizes your logo and helps to show it with good quality on retina screens.


Uploading a Logo Globally

The global logo will be used across your whole website.

To upload your global logo:

1From the WordPress left menu, go to Theme Options > Global Settings > Logo & Title.

2Find your desired logo type and click on Upload.


3Specify an appropriate Width value for the logo.

4Click on Save Settings.


Overriding the Global Logo on a Page

Instead of using one logo for the whole website, there is an option to add a logo only to a specific page.

To upload your page specific logo:

1From the WordPress left menu, go to Pages and pick a page where you wish to upload your logo.

2Scroll down to Jupiter Styling Options and enable Override Global Settings.

Configuring logos - Override global settings

3Find your desired logo type and click on Upload.

4Specify an appropriate Width value for the logo.

5Publish or Update your page.


Adding a Logo in the Footer

To add a logo in the footer:

1From the WordPress left menu, go to Appearance > Widgets.

Configuring logos - Widgets

2On the Widgets page, drag and drop the Text widget onto one of the Footer Widget Areas.

Configuring logos - Footer Widget Areas

3Inside the text widget Content, add the text below and customize it to your logo URL.

<img src="Link-To-Your-Logo" alt="" />


Increasing the size of the Logo

If you want to make a logo bigger in the header, you can do this increasing the header height. Once the header height is changed to bigger value, the logo size will be also increased proportionally.

To change header height:

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

2Increase the value in the Header Height setting.

3Click on Save Settings button.

After that check the site on frontend and you’ll see that not only the header height was increased, but also the logo itself has larger size.