# Header

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FCUsSjb0C17R7p2e4MiL1%2Flivechat883x471%20(1).png?alt=media&#x26;token=1ad5a821-413a-4e9b-a7f5-850fc173bcd3" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=sleek_helpdocs&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>

***

{% embed url="<https://youtu.be/xz6Gly15Xtc/>" %}

## What is the header section?&#x20;

The header is a content block at the upper part of your website that appears on every page. It usually contains the logo of a store, the main navigation menu, and other elements such as a search bar, language selector, etc.

The header plays a vital role in branding your site, helping visitors navigate, and displaying your most important pages.&#x20;

## How to edit the header section in Sleek

You can freely customize your header to suit your business needs by choosing the main menu, and other addons.

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

1. Go to **Online Store >** **Themes > Customize.**
2. Choose **Header** section
3. Make necessary changes **> Save.**
   {% endhint %}

### Menus

Click **Select menu** to connect a menu (assembled in the **Navigation** admin).  You can choose your desktop menu and mobile menu separately.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fl6Ip8Gy6uZaWeLNSTcvA%2Fimage.png?alt=media&#x26;token=625b821e-65ef-44e2-b38e-272a18b30f35" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To add, remove, or edit menus in your Shopify store, see [Editing menus](https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus)
{% endhint %}

Set the menu's dropdown to be opened by clicking or hovering on the menu items using the **Dropdown menu trigger** setting.

Enable the **Show separator line** checkbox to delineate the header from other sections with a separator line.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fwqh7SMnCH6XnqCOpDSW4%2Fimage.png?alt=media&#x26;token=9829f6d5-f7a7-4eae-acb6-bc4dc5037571" alt=""><figcaption></figcaption></figure>

### Header layout

Decide how the logo and menu are displayed on your header.

{% tabs %}
{% tab title="Logo left, menu center" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FFrzMLzCNaBXc7hssyqOf%2Fimage.png?alt=media&#x26;token=1edb118f-42c0-472d-9006-5e5e532ff079" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Logo center, menu left" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FSZ5450x2VfeF2zH3oL8G%2Fimage.png?alt=media&#x26;token=d1497774-98ab-4dec-8104-40f2ba4e3de9" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Logo center, menu split" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FAQ16oBnIaca8EXXexWUy%2Fimage.png?alt=media&#x26;token=75d45af6-51f9-4e1f-84f1-94a85a3c4063" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

To add your logo, go to Theme settings > [Logo](https://docs.foxecom.com/sleek-theme/theme-settings/logo).

### Sticky header

Set your header to be visible when scrolling up or always visible using the Sticky header setting.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FqG0uXFStv0Vkl2CETo8d%2Fimage.png?alt=media&#x26;token=31b437be-d204-43d8-8eaf-4d564a3a28c2" alt=""><figcaption></figcaption></figure>

You can also enable a separator line between the header and other sections below.

### Transparent header

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F0UR4UMpKqcFHTG1ceICD%2Fimage.png?alt=media&#x26;token=45f3b326-ec93-4b22-8714-20d6466a93c7" alt=""><figcaption></figcaption></figure>

You can enable a transparent header to create a visually appealing and immersive experience for your customer. This feature allows the first section to seamlessly blend below your header, rather than appearing separate.

* **Enable transparent header**: Enable transparent header for your theme
* **Color**: Change the color of the text on transparent header

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FuFNZPeKnBuzP7ifd03Rr%2Fimage.png?alt=media&#x26;token=fc634746-a077-4c6a-965b-4bfaeb661470" alt=""><figcaption></figcaption></figure>

### Mobile layout

Decide the **logo position** on mobile view:

* Logo left, hamburger menu icon right
* Logo center, hamburger menu icon left.

{% tabs %}
{% tab title="Logo left" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FXkHtYAR1qQ8cEQlG4vvB%2Fimage.png?alt=media&#x26;token=ee7ee0a4-b59d-489c-89a9-5b282e9396a1" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="undefined" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Ftp7vNl6YKBza311bk32N%2Fimage.png?alt=media&#x26;token=c306aa87-128d-4463-9857-e26f598b1b09" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Add-ons

* **Show social media icons**: based on your settings in Theme settings > [Social media](https://docs.foxecom.com/sleek-theme/theme-settings/social-media).
* **Enable language selector**: to include a Language selector dropdown for customers to select their preferred language.
* **Enable country/region selector**: to include a Country selector dropdown for customers to select their region and currency.