# Header

{% hint style="success" %}
**Steps:**

* In the theme editor, click **Theme settings**
* Locate **Header**
* Select header and set other global options for header like upload logo, set width, set size for fonts and color, set colors and click save.
* Go to sections, select header, set style for header and click save.
  {% endhint %}

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

#### &#x20;**Display on top above header**

<figure><img src="/files/G9B29GoV4fxG5TQlrNoj" alt=""><figcaption><p>preview top promotion bar</p></figcaption></figure>

* Enable option to display promotion text above header
* Now go to sections, click **Top Promotion Bar** section
* Set look for section and then click **Add promotion text** to add new block
* Click on block to add text and customize text look from each block
* Click save

### <mark style="color:blue;">Top Information Bar</mark>

&#x20;**Display on top above or below header.** You can display some important information about your store.

<figure><img src="/files/HIjRZZitAruiCcE4epbJ" alt=""><figcaption><p>preview top information bar</p></figcaption></figure>

* Enable option to display information bar
* Select position to display above main header or below header
* Now go to sections, click **Top Information Bar** section
* Set the look for section, and then click **Add column** to add a new text column
* Click on block to add text in column and click save

### <mark style="color:blue;">Top Header</mark>

&#x20;**Display above main header.**  Display links, text, social icons and language & currency selector

<figure><img src="/files/beXRNrWYfZ0o6EM2sr2I" alt=""><figcaption><p>preview top header</p></figcaption></figure>

* Enable option to display top header  &#x20;
* Now go to sections, click **Top header** section &#x20;
* Set the look for section and then click on **Add block** to add new block   &#x20;
* **Menu Block** : Display menu links. I.e. Contact Us, About Us, Help
* **Text Block** : Display small text.i.e. Add phone number, email address, Store time, Welcome text
* **Social Icons :** Display Social icons
* **Currency, Language** : Display Currency, Language, Social Icons and Menu Link ( Optional)
* Add required block and click save.

### <mark style="color:blue;">**Main Header**</mark>

This is main header of your store.  **Choose main header design, set other header global options from here then go to sections and select header to set customize sub header look.**

* Upload logo for your store, set logo width and header height
* Enable sticky header and set options for sticky header
* Enable wishlist.
* Set header appearance like background, text, icons and border colors&#x20;
* Set Icon size and font size for text that display with icons on some header design
* Choose icons for my account and cart.
* Set store **main navigation style** from here.&#x20;
* Set Language & Currency selector text colors
* Set menu label text colors. ( Labels that display with menu links)
* Go to sections -> Select header to customize header sub look.

{% embed url="<https://youtu.be/Es6-mkkSdng>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://adornthemes.gitbook.io/vogal-theme/theme-settings/header.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.