# Header

{% hint style="warning" %}
**Note!** The header options described below can be used on the desktop view!

They can be applied to the "[<mark style="color:blue;">Header - classic</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/header#header-classic)" section.
{% endhint %}

### Layout

Use the options from the **"Desktop"** drop-down to change the look and feel of the Header section. Choose one of the pre-design types to change the layout of the first Header line:

* &#x20;**"In one line"**: "Logo left", "Logo center", "Logo and menu left", "Menu center", and "Menu and logo center".
* &#x20;**"In two lines"**: "Logo left" and "Logo center".

In the following examples, you can view some of the header types:

{% tabs %}
{% tab title="In one line, logo left" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FoEeyR5BrPdnNcjBPyq8n%2Flogo%20left.png?alt=media&#x26;token=fc7e842a-0ca8-4c4e-b09e-cc201081d2b1" alt=""><figcaption><p>Logo on the left and the Main menu with the header buttons on the right</p></figcaption></figure>
{% endtab %}

{% tab title="In one line, logo center" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FZI6kqKnXOq8EIkdmhAQJ%2Flogo%20center.png?alt=media&#x26;token=f26d4853-1a83-40bd-99ef-b0ff616c8e2c" alt=""><figcaption><p>Centered logo with the Main menu on the left and header buttons on the right</p></figcaption></figure>
{% endtab %}

{% tab title="In one line, logo and menu left" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FnDz2FpQiaravHY2KlGTQ%2Flogo%26menu_left.png?alt=media&#x26;token=ac7c0d00-1c6b-413f-8edc-19dd45ff8650" alt=""><figcaption><p>Logo and Main menu on the left with the header buttons on the right</p></figcaption></figure>
{% endtab %}

{% tab title="In two lines, logo left" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FtCidSW9qifoyzsW4k4qj%2Fheader_in%20two%20lineslogo%20left.png?alt=media&#x26;token=bb794b39-71be-48c1-ab55-55f6bf9aa2b0" alt=""><figcaption><p>Logo and Main menu underneath on the left with header buttons on the right</p></figcaption></figure>
{% endtab %}

{% tab title="In two lines, logo center" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F3s73F2yLV6BK8oNcqhuE%2Ftwo%20lines_logo%20center.png?alt=media&#x26;token=be8b1bdc-8ca1-477b-a720-213d14b6ed5b" alt=""><figcaption><p>Centered Logo and Main menu underneath with the header buttons on the right, and the search icon moved to the left</p></figcaption></figure>
{% endtab %}
{% endtabs %}

The **"Mobile"** picker includes options to change the logo position to "Logo left" or "Logo center".

### Sticky effect

{% hint style="warning" %}
**Note!** The sticky header works on all pages except for the "[<mark style="color:blue;">Products</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/page-categories/products)" and "[<mark style="color:blue;">Collections</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/page-categories/collections)" pages.
{% endhint %}

Use the options described below to configure the sticky header view on the desktop.

In the **"Type"** drop-down, one can specify whether to display the sticky header while scrolling down or up from the bottom of the page by selecting one of the required options:

* **"Full section"**. This option ensures the entire header is displayed according to the header type used in the "[<mark style="color:blue;">Type on large screens</mark>](#header)" drop-down and the number of menus applied in the "[<mark style="color:blue;">Header</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/header#text-menu)" section.
* **"Text menu"**. Use the option to display the Secondary navigation menu with the Logo in the sticky header, avoiding showing the "Icons menu".

**Enable on mobile**

Activate the option to show the sticky header on mobile.

**Hide when scrolling down**

This option disables the sticky header when scrolling down on all screen sizes. However, the feature still works when scrolling up.