# Header

<figure><img src="/files/YXBHClmuIdzmicYniTsL" 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="/files/4xppPrYMH0pj8m6vOnHi" 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="/files/ZPQL89uDW20gNfIVi0i9" 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="/files/tnbllr5uePjyvCFkwXzc" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="/files/aPN6JzoFlNff2Ybf84GK" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="/files/MTI0X1agB4wjVzlD0arv" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

To add your logo, go to Theme settings > [Logo](/sleek-theme/theme-settings/logo.md).

### Sticky header

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

<figure><img src="/files/FMxGDVsJYQzMdFIqW1w6" alt=""><figcaption></figcaption></figure>

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

### Transparent header

<figure><img src="/files/fkZJhixPJVlFf91GPsiJ" 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="/files/HmqAw0UhZEjTkAD83rFR" 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="/files/yPLhUgejka4CmqPeTsA9" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="undefined" %}

<figure><img src="/files/3ep2FeVxSPexoTVEWw23" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Add-ons

* **Show social media icons**: based on your settings in Theme settings > [Social media](/sleek-theme/theme-settings/social-media.md).
* **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.


---

# 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://docs.foxecom.com/sleek-theme/pages-global-sections/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.