Configuring Toolbar

Last Updated on

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.

In this article


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:

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

Configuring toolbar - Header

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

Configuring toolbar - Header styles

3
Click on Save Settings.

Making the Toolbar Visible on Small Devices

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

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

Configuring toolbar - Custom CSS

2
Copy 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;
}
}

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

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

Configuring toolbar - Sticky header

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

Configuring toolbar - Sticky header behavior

3
Click on Save Settings.

To make the toolbar sticky:

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

Configuring toolbar - Custom CSS

2
Copy 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;
}

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

1
From the WordPress left menu, go to Theme Options > Advanced > Custom CSS.
2
Copy 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.

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

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

Configuring toolbar - Header Toolbar

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

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

1
Go to the MailChimp website and login.
2
Click on Lists.
3
Click on the drop-down menu icon next to the list that you want to integrate, and click on Settings.
4
Find 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:

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

Configuring toolbar - Header Toolbar

2
Enable the Show Mailchimp Subscribe Form option.

Configuring toolbar - Mailchimp subscribe form

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

Configuring toolbar - Mailchimp list ID

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

Configuring toolbar - Mailchimp Opt-in Email

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

1
Go to Appearance > Menus.

Configuring toolbar - Menus page

2
Select a menu from the Select A Menu to Edit drop-down field and click to Select, or create a new menu.
3
Click the checkbox of the Header Toolbar Navigation option.

Configuring toolbar - Header toolbar navigation

4
Click on Save Menu.
x
Note: Please note that you can not add Sub Menus in Header Toolbar Navigation.

Configuring the Language Switcher

If you have a multilingual website that is configured with WPML plugin, you can place your language switcher 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:

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

Configuring toolbar - Header

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

Configuring toolbar - Search form in header

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

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

Configuring toolbar - Header

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

Configuring toolbar - Social Network

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

Configuring toolbar - Social Network Style

4
In 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.
5
Click on Save Settings.
x
Note: To learn more about configuring social networks, read the Configuring social networks article.

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:

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

Configuring toolbar - Header toolbar

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

3
Click on Save Settings.

Configuring the Design for Mobile

To change the style and color of the toolbar:

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

Configuring toolbar - Mobile Header

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

3
Click on Save Settings.

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

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket