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:
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. |
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:
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. |
Configuring the Design for Mobile
To change the style and color of the toolbar:
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. |
If there are any questions, feel free to contact our support team.