> 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](/files/uFHMoxzOxz4B8O7ZHgHX)

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

![](/files/znqSc59O49Sf2eHIKF9x)

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

![](/files/3ftr4dW3UcgSQkG5MKfJ)

{% 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](/files/uBuRLcp116Wo125WG05M)

* 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

![](/files/Mnoaq5dMnDH4Dg5ixN0W)

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

![DEMO](/files/lM2TQyq9a66B1qZZeTiR)

* 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

![](/files/dlKfksGrEkEiMOTvGVWi)

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

(Go to **Header Global)**

![](/files/tALLbrShHTVSK72qIDTs)