# Top Bar

In Top Bar Section you can adjust every element displayed on the top bar panel.

![](https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2F1yRTtaY1c8N4oATtOw1M%2FTheme%20options%20-%20Top%20bar%20added.png?alt=media\&token=23c65bda-98a0-4fe3-9178-52dd0e8b617f)

### List of Settings

Here you can see all top bar features. Turn features on to reveal more related settings.

![](https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FKNWkkVkCXIQiu3MPZisg%2FTheme%20options%20-%20Top%20bae%20settings.png?alt=media\&token=49ca6efa-37db-4c53-bc77-82fcb48a5200)

### Enable Top Bar

You can enable the top bar on your website just by turning on the **Enable Top Bar option.** 

Background color selection for top bar is available.

![](https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FLuBeFvfVk7VGAxARu3jt%2FTheme%20options%20-%20Top%20bar%20enable.png?alt=media\&token=b86956f3-d592-4dc6-9362-adaa876cd076)

**Additional Customization** - This option shows additional settings for top bar. When the option is disabled after making changes, settings will still be applied:

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FYY39rcfh5soBGOVoQ8Q3%2FTheme%20options%20-%20Top%20bar%20add%20customization.png?alt=media&#x26;token=9a9b342d-6e98-4c69-a260-0e96ad6778fe" alt=""><figcaption></figcaption></figure>

**Full Width** - The top bar spans from right to left and takes the full 100% of the screen's width:

{% tabs %}
{% tab title="Full Width enabled" %}

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2F2th5fWUiiq5RO3KfuUUh%2FTheme%20options%20-%20Top%20bar%20full.png?alt=media&#x26;token=141617e9-aa20-4a23-9128-6ef909717cb2" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Full Width disabled" %}

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FZoS9hxvO4zzvE0caUbno%2FTheme%20options%20-%20Top%20bar%20not%20full.png?alt=media&#x26;token=a2ba305f-41e2-48ff-b0dd-68b12536fc41" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**Background Color** - The background color of the Top Bar.

**Box Shadow Position** - The position of the line that will be displayed below the Top Bar.

**Shadow Color** - The background color of the line that will be displayed below the Top Bar.

### **WooCommerce Cart**

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FEA1IR2iJodyQtVp48B5q%2FTheme%20options%20-%20WooCoomerce.png?alt=media&#x26;token=403526af-aae3-46b9-b171-1a4c4be82503" alt=""><figcaption></figcaption></figure>

Display the WooCommerce Cart on the Top Bar by enabling the **WooCommerce Cart** option. The cart requires the [WooCommerce plugin](https://wordpress.org/plugins/woocommerce/) to be installed and set up. &#x20;

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FVSCbkWBdQtkL0LnsKnAE%2FTheme%20options%20-%20Top%20bar%20woocommerce%20added.png?alt=media&#x26;token=ed134edd-8cef-4062-8f9c-c5374ceaceee" alt=""><figcaption></figcaption></figure>

**Show on mobile** - Option to show the button on the mobile devices.

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FlAHcT61Osl2KragObpDV%2FTheme%20options%20-%20WooCoomerce%20mobile.png?alt=media&#x26;token=ddb21610-43ea-4881-8e1a-52289731ca69" alt=""><figcaption></figcaption></figure>

**Additional Customization** - This option shows additional settings for WooCommerce Cart Icon. When it is enabled typography and font colors can be customized:

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FWuKCJIn3paFEIuAcbilT%2FTheme%20options%20-%20Top%20bar%20woocommerce%20add%20set.png?alt=media&#x26;token=1a5cee27-7d6d-4057-ba3e-fb64e82db334" alt=""><figcaption></figcaption></figure>

### Language Switcher

![](https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2F81BLerT3KEQB5yIdTz6j%2FTheme%20options%20-%20Top%20bar%20WPML.png?alt=media\&token=3473bdf4-c00a-4b52-ad59-021734d236f5)

{% hint style="warning" %}
**Note:** The Language Switcher option will work only if the WPML Multilingual Plugin is installed.&#x20;

The [WPML](https://wpml.org/) plugin is not included in the theme package due to licensing restrictions.
{% endhint %}

If you are going to create a multilingual website, enable the **Language Switcher** option so that users can easily switch between languages.

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FaqnXsCcday7rZqVdXDZ5%2FTheme%20options%20-%20Top%20bar%20WPML%20added.png?alt=media&#x26;token=fdb86975-a0bc-4dbf-8c8a-feacae20b69d" alt=""><figcaption></figcaption></figure>

**Show on mobile** option can be enabled to show the WPML switcher on the mobile devices.

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FjfVJNp3XmPN64GKe7MiN%2FTheme%20options%20-%20Top%20bar%20WPML%20mobile.png?alt=media&#x26;token=b18b7197-cdc1-4ccc-a6ab-e7913e99a5c0" alt=""><figcaption></figcaption></figure>

**Switcher Style** - It is possible to use the default settings of the WPML custom Language switcher or use Theme styles. When WPML is selected Additional setting below will not be available.

{% hint style="info" %}
The WPML language switcher style depends on the WPML settings. [Here](https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/) you can read more information about WPML Language switcher options.
{% endhint %}

**Additional Customization -** This option shows additional settings for WPML Language switcher. When it is enabled typography and font colors can be customized. When the option is disabled after making changes, settings will still be applied:

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2F3ZgJjpPIpqjXcYZeJ9XM%2FTheme%20options%20-%20Top%20bar%20WPML%20adv%20settings.png?alt=media&#x26;token=21bee7cd-a1a3-417e-b49d-54dec52c842d" alt=""><figcaption></figcaption></figure>

### Enable Search

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FwMxFOnwUUS2mizyH9m82%2FTheme%20options%20-%20Top%20bar%20search.png?alt=media&#x26;token=cfb5d139-e6fe-4b03-801a-7f5331dd352a" alt=""><figcaption></figcaption></figure>

**Enable Search** option to add the search button to the Top Bar area.

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2F86VQvAa76vbdMUdJ7Maq%2FTheme%20options%20-%20Top%20bar%20search%20added.png?alt=media&#x26;token=1d62a95a-57a2-4e99-89eb-410609f13888" alt=""><figcaption></figcaption></figure>

Use **Show Search on mobile** option to show the button on the mobile devices.

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2Ft5bK1aXL1dkYWm3m3wmq%2FTheme%20options%20-%20Top%20bar%20search%20mobile.png?alt=media&#x26;token=93258e93-8cad-40bb-86c9-3ab58e998407" alt=""><figcaption></figcaption></figure>

**Additional Customization** -  This option shows additional settings for Search such as font color and typography settings:

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FLrxy8kOVQwnVXCVXzrD8%2FTheme%20options%20-%20Top%20bar%20search%20adv.png?alt=media&#x26;token=6492e398-a776-4395-8c29-0481e1ada8a0" alt=""><figcaption></figcaption></figure>

### Enable Socials

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2Fl6BU5wT3Iu6sz9GTyT2K%2FTheme%20options%20-%20Top%20bar%20socials.png?alt=media&#x26;token=688d8aff-6245-4bcd-9557-172a7da2f613" alt=""><figcaption></figcaption></figure>

**Enable Socials** option to add social networks buttons to the top bar area.

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FegvTlj7CZ98QfMQEo2x3%2FTheme%20options%20-%20Top%20bar%20socials%20added.png?alt=media&#x26;token=4ec878d4-7833-4046-91b2-7f620492600f" alt=""><figcaption></figcaption></figure>

Use **Show Socials on mobile** option to show the buttons on the mobile devices.

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2F2x6YkhGpMKi74GIJDGSB%2FTheme%20options%20-%20Top%20bar%20socials%20mobile.png?alt=media&#x26;token=2af04e6d-243c-40b0-9c55-364bcaf6caf5" alt=""><figcaption></figcaption></figure>

**Additional Customization** -  This option shows additional settings for Social Icons. When the option is disabled after making changes, settings will still be applied:

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FNa1FNZ9vUA02gie1O0jy%2FTheme%20options%20-%20Top%20bar%20socials%20adv.png?alt=media&#x26;token=51a9214e-9890-4137-a0c5-b89f7159dd3d" alt=""><figcaption></figcaption></figure>

### Enable Addresses

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FSjuijTAzPFsSGFE7lGnp%2FTheme%20options%20-%20Top%20bar%20adresses.png?alt=media&#x26;token=489ad0c6-7203-45bc-8523-6b93fd3a48be" alt=""><figcaption></figcaption></figure>

**Enable Addresses** option adds address, phone number and working hours to Top Bar.

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2F4TUBwnXnhji7oH4gcUUu%2FTheme%20options%20-%20Top%20bar%20adresses%20added.png?alt=media&#x26;token=a1e53a0b-afaf-4763-8e00-e0535d0b9413" alt=""><figcaption></figcaption></figure>

**Enable on mobile** option can be enabled to show the Search icon on the mobile devices:

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2F8Hb8rBndqHYnkzxV0Plv%2FTheme%20options%20-%20Top%20bar%20adresses%20mobile.png?alt=media&#x26;token=808ab48d-79e5-4d94-b13d-2117d00003e9" alt=""><figcaption></figcaption></figure>

**Additional Customization** -  This option shows additional settings for Addresses such as font color and typography settings:

Here you can pick the relevant icons, specify colors and sizes.

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FprUiQ1pNVIM6u6pDLNyP%2FTheme%20options%20-%20Top%20bar%20adresses%20adv.png?alt=media&#x26;token=9d777a1c-7ea7-489b-a4b2-ab7169756e7a" alt=""><figcaption></figcaption></figure>

The Contact information should be added for each office separately.

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2F4TKH8wqe3a8nhmaQJcgj%2FTheme%20options%20-%20Top%20bar%20offices.png?alt=media&#x26;token=ae6b2b25-013f-4862-a077-78d4fe3fa243" alt=""><figcaption></figcaption></figure>

Here you can provide the address information, email, working hours and phone number. For each label, you can pick an icon, specify its size and color.

{% hint style="success" %}
The editor for Address, Working Hours and Phone number fields support HTML tags which are useful for structuring and creating content. Example for phone number filed to make it clickable: [+123987654321](tel:+123987654321)
{% endhint %}

**Add Office** <img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FdfBd8Zm3zClk1fekuRUW%2FTheme%20options%20-%20Top%20bar%20offices%20add%20button.png?alt=media&#x26;token=b27e567d-2f26-4bc3-963a-6fbecf1a4563" alt="" data-size="original"> button on the bottom of the section allows creating additional Office information. Delete the Office by clicking the Delete option located near the Office title.&#x20;