> For the complete documentation index, see [llms.txt](https://adornthemes.gitbook.io/vogal-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://adornthemes.gitbook.io/vogal-theme/theme-settings/header.md).

# 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>" %}