# 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="/files/EpWiLJUXzZA6ISUCnj94" 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](/hyper-theme/theme-settings/logo.md)**.**
{% 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="/pages/zpspHT2dgOPWwxxoBZDs" %}
[Mega menu](/hyper-theme/pages-global-sections/header/mega-menu.md)
{% 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="/files/AYXRum4CyqV10bvDod67" alt=""><figcaption></figcaption></figure>

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

{% tab title="Logo center" %}

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

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

<figure><img src="/files/NGNDtfUIUd52QVsdQWw5" 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="/files/fIUOAJFHF4RijGGx9aMp" alt=""><figcaption></figcaption></figure>

{% endtab %}

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

<figure><img src="/files/itM8ma1W1JB4vmcg4t3s" 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](/hyper-theme/theme-settings/social-media.md) to set up your social links.
* Enabling **language selectors** for multilingual stores. Learn more: [Use Language selector](/hyper-theme/pages-global-sections/header/use-language-selector.md)
* Enabling **country/region selectors** for international markets. Learn more: [Use Country/ Region selector](/hyper-theme/pages-global-sections/header/use-country-region-selector.md)

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

### Padding

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

<figure><img src="/files/7fhbUk7keP5PSlZ9AOvs" alt=""><figcaption></figcaption></figure>

***

<figure><img src="/files/6RW1JWuKNf9ovVFLkLXc" 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>


---

# 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/hyper-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.