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

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(67)_EpWiLJUX.jpg)

## 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 type="success">

Steps:

1. Go to **Online Store >** **Themes > Customize.**
2. Choose **Header** section
3. Make necessary changes
4. **Save** the settings.

</Hint>

<Hint type="info">

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

</Hint>

### Menus

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

<Hint type="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)

</Hint>

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

<PageLink href="https://docs.foxecom.com/hyper-theme/pages-global-sections/header/mega-menu">Mega menu</PageLink>

* **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.

![image](https://docs-assets.foxecom.app/hyper-theme/image_AYXRum4C.png)

![image](https://docs-assets.foxecom.app/hyper-theme/image_erqJJKrw.png)

### Header layout

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

<Tabs>
<Tab title="Logo left">

![image](https://docs-assets.foxecom.app/hyper-theme/image_B5wv4NE9.png)

</Tab>

<Tab title="Logo center">

![image](https://docs-assets.foxecom.app/hyper-theme/image_HnGBgv68.png)

</Tab>

<Tab title="Logo left, search center">

![image](https://docs-assets.foxecom.app/hyper-theme/image_NGNDtfUI.png)

</Tab>
</Tabs>

### 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">



<Video src="https://docs-assets.foxecom.app/hyper-theme/Untitled%20design%20(12)_fIUOAJFH.mp4" autoPlay="true" loop="true" muted="true" aria-label="image" />

</Tab>

<Tab title="On scroll up">



<Video src="https://docs-assets.foxecom.app/hyper-theme/Untitled%20design%20(13)_itM8ma1W.mp4" autoPlay="true" loop="true" muted="true" aria-label="image" />

</Tab>
</Tabs>

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) 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)
* 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)

![image](https://docs-assets.foxecom.app/hyper-theme/image_hegZqmHT.png)

### Padding

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_7fhbUk7k.png)