# Header

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

The **Header** section in the Hyper theme is a crucial component for navigation, branding, and showcasing important content. It allows for an engaging and user-friendly shopping experience through its customizable mega menu blocks.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FcKQU9cUymiOcijn3WDWA%2FHyper%20docs%20screenshot%20do%20not%20delete%20(67).jpg?alt=media&#x26;token=93074720-a09b-4ede-808b-4b6611224e48" alt=""><figcaption></figcaption></figure>

## How to edit the Header section

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
4. **Save** the settings.
   {% endhint %}

{% hint style="info" %}
To add your logo, go to **Theme settings >** [logo](https://docs.foxecom.com/hyper-theme/theme-settings/logo "mention")**.**
{% endhint %}

### Menus

* Select a **Menu** for your header.
* Select a **Mobile Menu** to ensure smooth navigation on smaller screens.

{% 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 %}

:bulb: **See how to customize Mega menu:**

{% content-ref url="header/mega-menu" %}
[mega-menu](https://docs.foxecom.com/hyper-theme/pages-global-sections/header/mega-menu)
{% endcontent-ref %}

* **Drop-down menu trigger**: Choose whether dropdowns open on **Click** or **Hover**.
* **Enable collapse on scrolling:** Toggle ON to minimize the header while scrolling up down the page, keeping it compact.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FYdq0jOK40fUPE7teIzeI%2Fimage.png?alt=media&#x26;token=d2ee3e81-349d-456e-b1b2-70c68b1aed47" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FGtFyH0xYrH0otrWGHJJ7%2Fimage.png?alt=media&#x26;token=cd935c82-69fd-41f5-b4b8-f82aa05c67aa" alt=""><figcaption></figcaption></figure>

### Header layout

Choose between **Logo left** or **Logo center** to align your branding with your design preferences.

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

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FOHNezZizalO8sEGcDQyf%2Fimage.png?alt=media&#x26;token=60880f95-22cf-4f32-8d79-31f37ecda1b4" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Logo center" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F2CLswAdHmSR2J8uNhqNe%2Fimage.png?alt=media&#x26;token=2e9aef68-cd9a-4f1f-b082-589b845db95b" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FrLleby4beBzZocYzv6k5%2Fimage.png?alt=media&#x26;token=d3ac74ec-02a0-4d13-bcb0-c5be979ab816" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Sticky header

Enable the **Sticky header** option so the menu remains visible when customers scroll. Set it to appear:

* **Always visible**
* **On scroll up**

{% tabs %}
{% tab title="Always" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FApLN4zntV81eV58gYLMT%2FUntitled%20design%20(12).gif?alt=media&#x26;token=ef7db38a-c0db-4918-b529-0d96e90a2e3a" alt=""><figcaption></figcaption></figure>

{% endtab %}

{% tab title="On scroll up" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FBgPstAKJQG04esH0utGi%2FUntitled%20design%20(13).gif?alt=media&#x26;token=67929d42-e6a5-4ec9-8d67-8a164f559d5d" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

### Mobile layout

Toggle options for:

* Showing media social icons. Go to [social-media](https://docs.foxecom.com/hyper-theme/theme-settings/social-media "mention") to set up your social links.
* Enabling **language selectors** for multilingual stores. Learn more: [use-language-selector](https://docs.foxecom.com/hyper-theme/pages-global-sections/header/use-language-selector "mention")
* Enabling **country/region selectors** for international markets. Learn more: [use-country-region-selector](https://docs.foxecom.com/hyper-theme/pages-global-sections/header/use-country-region-selector "mention")

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FvMapaoWF0IfTQoAQQHO7%2Fimage.png?alt=media&#x26;token=c456544f-5f35-4ce3-a09b-07172306000a" alt=""><figcaption></figcaption></figure>

### Padding

* Customize the **Header Top Padding** and **Bottom Padding**.
* Adjust **Navigation Padding** for precise spacing.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FY3wVnPPBeEXT0iHZgMFk%2Fimage.png?alt=media&#x26;token=99a5dfdf-4c1d-4c55-b426-94a836572a02" alt=""><figcaption></figcaption></figure>

***

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>