Top Bar
Last updated
Last updated
Configure every item on the Top Bar of your website on the Top Bar tab in the Theme Options panel.
The settings for the Top Bar include several sections, such as Main Settings, Address, Working Hours, Phone Number, Menu, and Socials. Let's walk through each of them.
The Top Bar style does not depend on the layout or the header style.
Set the main settings of Top Bar using the following options:
First, turn on the Enable Top Bar option to display the Top Bar on your website.
In this settings series you can change the colors of different items inside the Top Bar:
Indicate the Top Bar background color on the Background Color field.
In the Text Color section, you can change the color of the text on the Top Bar:
Set the Top Bars' icons color on the Icon Color field:
Indicate the Top Bars' links color on the Link Color field:
Also, you can enable the Login/Register option and display the Login and Register links on the Top Bar:
Please Note:
For the Dealership layouts (Dealership One and Two, Aircraft, Boats, Equipment, Motorcycle dealer), the login feature will allow the user to log in to the WooCommerce account only.
If you decide to build a multilingual website, enable the Language Switcher option, so the users can easily switch between languages.
Note: The Language Switcher option will work only if the WPML Multilingual Plugin is installed.
The WPML plugin is not included in the theme package due to licensing restrictions.
Also, the theme allows publishing listings in several currencies on the website.
To add the currencies go to Inventory Settings > Price > Multiple Currencies section in the Theme Options panel.
In the Address section, you can edit the address details on the top bar.
You can choose the Address Icon from the available icons' range on the Icon Picker field and set icons' color and size on appropriate fields.
Insert the address line in the Address field:
Also, you can show this address on the map by inserting the map embed link under the Google Map Address URL section:
To get the embed map code, open your needed address on Google Maps, click the Share button, and open the Embed a map section. Use the link inside the SRC attribute:
Decide whether you want to display the address in the mobile view of the website in the Show Address on Mobile section
In the Working Hours section, you can edit the details of your working schedule on the top bar:
Select a different icon, apply the color, and set the icon size in the Working Hours Icon section. Then enter the text to display in the Working Hours field.
Decide whether you want to display the Working Hours in the mobile view of the website in the Show Working Hours on Mobile section
In the Phone number section, you can edit the details of your contacts on the top bar:
Apply the color and set the size of the icon in the Phone Number Icon section. Also, enter the text to display in the Phone number field.
Decide whether you want to display the Phone number in the mobile view of the website in the Show Phone Numbers on Mobile section.
In this section, you can decide if you want to display the menu on the top bar of the website.
In the Menu section, you can also change the Font size, the Text color, and the Hover Text Color of the top bar menu.
Create the Menu under the Appearance > Menus section and set it as Top Bar Menu on the Menu Settings section:
In the Socials section, you can select which social media links you prefer to display on your top bar:
The social networks buttons will be displayed only if the links to these social networks are provided in the Socials tab (Theme Options > Socials)
