> For the complete documentation index, see [llms.txt](https://elessi-docs.nasatheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://elessi-docs.nasatheme.com/header-and-menu/header/top-bar.md).

# Top Bar

![Header Layout 1](https://980438068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MV0r5tR9bPLGnwB_pyk%2Fuploads%2Fat0k0DsGE6A4KTwDAirO%2FFashions%20%E2%80%93%20Elessi%202022-03-22%2016-05-34.jpg?alt=media\&token=ff35f42b-3d45-4137-88fb-b6537d3d88eb)

## How to change the Top Bar Content?

### <mark style="color:blue;">**1. Top Bar left**</mark><mark style="color:blue;">:</mark>&#x20;

Currently, the <mark style="color:red;">**Elessi**</mark> theme just includes the top bar in case you choose: \ <mark style="color:green;">**Header Layout 1, Header Layout 2, Header Layout 3, Header Layout 4 and Header Layout 6**</mark>

#### **Simply, please follow these steps:**

<mark style="color:blue;">**Step 1**</mark> - Go to **Theme Options → Static Block** and edit **Top Bar** or **Add new Block** if not exists

![](https://980438068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MV0r5tR9bPLGnwB_pyk%2Fuploads%2FtHpeXW38Aool7ZzaG82Z%2Fstatic-block.jpg?alt=media\&token=f3f42c9f-0467-424a-9750-bde8198feff3)

<mark style="color:blue;">**Step 2**</mark>**&#x20;-** Copy and add this code to change the content for the top bar

```html
<span class="nasa-flex jc">Add anything here or just remove it...</span>
```

![](https://980438068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MV0r5tR9bPLGnwB_pyk%2Fuploads%2FNn0Wg1QAtaVXvGmwoFHS%2Fstatic-block-2.jpg?alt=media\&token=435001b7-aabd-4827-a9a7-4787efa98d3c)

{% embed url="<https://www.youtube.com/watch?v=8pyqhxafOS8>" %}

{% hint style="warning" %}
**NOTE**: If you want to use the <mark style="color:red;">**Elementor**</mark> plugin to build the top bar, please view a guidepost [<mark style="color:blue;">**here**</mark>](/elementor/elementor-elements/static-blocks.md)
{% endhint %}

### <mark style="color:green;">**2**</mark>*<mark style="color:green;">**.**</mark>*<mark style="color:green;">**&#x20;**</mark><mark style="color:green;">**Top Bar right:**</mark>

#### <mark style="color:green;">**Language Switcher**</mark>

![DEMO](https://980438068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MV0r5tR9bPLGnwB_pyk%2Fuploads%2FntKjrPzZHXvZu5lmeqX3%2FGoogle%20Chrome_2022-01-05%2018-29-09%402x.jpg?alt=media\&token=8d78c8f5-2262-49ca-8238-ea006e40a685)

* Install [<mark style="color:blue;">**WPML**</mark>](https://wpml.org/) to set your language switcher
* Go to **Theme Options → Header Global** to enable this option

![](https://980438068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MV0r5tR9bPLGnwB_pyk%2Fuploads%2FFD2nwa6s75G9r3uUpKAF%2FGoogle%20Chrome_2022-01-05%2018-33-57%402x.jpg?alt=media\&token=d6e02aa4-81d8-416f-8285-bc0552c95f5f)

#### <mark style="color:green;">**Currency Switcher**</mark>

![DEMO](https://980438068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MV0r5tR9bPLGnwB_pyk%2Fuploads%2FI4ygZAj20HXnkRRrQAVs%2FGoogle%20Chrome_2022-01-05%2018-48-35%402x.jpg?alt=media\&token=6247ea2a-8955-49cb-b2e1-e721a659d6c9)

* Install [<mark style="color:blue;">**WPML**</mark>](https://wpml.org/)**.**
* Please view the guide documentation [<mark style="color:blue;">**here**</mark>](https://wpml.org/documentation/related-projects/woocommerce-multilingual/multi-currency-support-woocommerce/) to know how to set up the WooCommerce Currency Switcher feature (included in the [<mark style="color:blue;">**WPML**</mark>](https://wpml.org/) package)
* Go to **Theme Options → Header Global** to enable this option

![](https://980438068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MV0r5tR9bPLGnwB_pyk%2Fuploads%2FzaUhZi5QYaIjYYBa0bxl%2FGoogle%20Chrome_2022-01-05%2018-45-04%402x.jpg?alt=media\&token=cb0df01d-9981-498d-b0ad-c2b403202629)

### <mark style="color:blue;">**3. Show/Hide Top Bar**</mark>

(Go to **Header Global)**

![](https://980438068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MV0r5tR9bPLGnwB_pyk%2Fuploads%2FNiTsFEF11IsnrMR9Rxqp%2FGoogle%20Chrome_2022-03-16%2020-04-49%402x.jpg?alt=media\&token=6b47ff0f-2a26-46c5-8340-fdca1d2690b8)