Configuring Toolbar

Updated on January 2, 2019

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.

Did this answer your question?