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:

Making the Toolbar Visible on Small Devices

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

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

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:

To make the toolbar sticky:

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

Setting custom height for the toolbar

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

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

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:

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:

To configure the settings for the MailChimp subscription form:

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:

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:

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:

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:

Configuring the Design for Mobile

To change the style and color of the toolbar:

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