# Header

![image](https://docs-assets.foxecom.app/zest-theme/Fox-BG%20Light%20(4)_cRKOYJnW.jpg)

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, shopping cart icon, etc.

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

## How to edit 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 **> Save.**

</Hint>

### General

Decide how the logo and menu are displayed on your header by changing the **Layout** option:

<Tabs>
<Tab title="Logo left, menu center">

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

</Tab>

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

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

</Tab>

<Tab title="Logo center, menu left and right">

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

</Tab>

<Tab title="Logo left, menu left">

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

</Tab>

<Tab title="Logo center, menu split">

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

</Tab>
</Tabs>

**Enable sticky header** if you want the header remains visible when the user scrolls down the page.

The **Sticky behavior** is only available if the Sticky header is turned on.

* **On scroll up:** The header appears only when the user scrolls **up** (good for saving screen space).
* **Always:** The header stays fixed at the top of the page at all times.

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

<Hint type="info">

The Sticky behavior option is only available in Zest **version 9.0.0 and above**. ✨

See [Changelog](https://docs.foxecom.com/zest-theme/changelog?utm_source=foxecom\&utm_medium=help_center_zest_header\&utm_campaign=anchor_text\&utm_term=changelog).

</Hint>

<Tabs>
<Tab title="On scroll up">

![image](https://docs-assets.foxecom.app/zest-theme/Animation111_J6P60MDr.gif)

</Tab>

<Tab title="Always">

![image](https://docs-assets.foxecom.app/zest-theme/header_sticky_top_sq3OZ9sV.gif)

</Tab>

<Tab title="No effect">

![image](https://docs-assets.foxecom.app/zest-theme/ezgif.com-gif-maker%20(1)_MjmK3cXO.gif)

</Tab>
</Tabs>

You can **Enable transparent header** to create a visually appealing and immersive experience for your customer.

<Hint type="warning">

This feature works on Home page only.

</Hint>

![image](https://docs-assets.foxecom.app/zest-theme/spaces_OdebKCa6IK9qfbdvSKj0_uploads_NiWgs3etPb3qYV2l7TjJ_ezgif_LicI1GLU.webp)

### Logo settings

Add a logo in the header to grab visitors' attention and set the tone for your brand.&#x20;

<Hint type="info">

The recommended image size and format is 200x80px .png with a transparent background.

</Hint>

* **Logo image**: This is the main logo that appears in your website's header.
* **Logo on transparent header**: If you enable a **transparent header**, this option allows you to set a different logo specifically for that view.
* **Logo on mobile**: This option lets you upload a separate logo for mobile devices.
* **Logo on mega menu hover**: This setting allows you to upload a specific logo that appears when users hover over a **mega menu** (if enabled).

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

You can resize the logo image by increasing or decreasing the width on desktop/mobile.

* **Desktop logo width**: This slider adjust the size of the logo displayed on **desktop screens** (50 - 250px).
* **Mobile logo width**: This slider controls the size of the logo on **mobile devices** (30 - 150px).

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

### Menu settings

This section lets you display your desired menu along with the logo. You can choose your desktop menu and mobile menu separately.

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

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

* Dropdown menu trigger: Set the menu's dropdown to be opened by **clicking** or **hovering** on the menu items.
* **Enable mega menu** if you want. See [Add a banner to mega menu](https://docs.foxecom.com/zest-theme/pages-global-sections/menu/add-a-banner-to-mega-menu)

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

### Addons

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

The Addons setting allows you to enable or disable additional icons and features in your website's header such as search, currency selector, language selector, etc.&#x20;

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

* **Show search icon**: When enabled, a search icon appears in the header, allowing users to search your website easily.
* **Show shopping cart**: When enabled, a shopping cart icon appears in the header.
* **Show account icon**: When enabled, an account icon appears in the header.
  * To set your **Customer account** preferences, see [this article](https://help.shopify.com/en/manual/customers/customer-accounts).
* **Show country/region selector**: When enabled, a dropdown menu appears in the header for users to select their country or region.

<Hint type="info">

Regarding the currency selector, language selector, and account icon, you must configure them in Shopify admin for them to show on the front end.&#x20;

</Hint>

✍ To learn how to set up **Currency** for your store, check out this article:

<PageLink href="https://docs.foxecom.com/zest-theme/languages-and-countries-regions/countries-regions">Countries/ Regions</PageLink>

* **Show language selector**: When enabled, a language switcher appears in the header, allowing users to change the website language.

✍ To learn how to set up **Language** for your store, check out this article:

<PageLink href="https://docs.foxecom.com/zest-theme/languages-and-countries-regions/languages">Languages</PageLink>

### Mobile layout

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

* **Left**: Logo left, hamburger left, menu icon right
* **Center**: Logo center, hamburger left, menu icon right.
* **Right**: Logo right, hamburger left, menu icon left.

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

<Tabs>
<Tab title="Left">

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

</Tab>

<Tab title="Center">

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

</Tab>

<Tab title="Right">

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

</Tab>
</Tabs>

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

* **Show search icon**: When enabled, a search icon appears in the mobile header.
* **Show shopping cart**: When enabled, a shopping cart icon appears in the mobile header.

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

* **Show account icon**: When enabled, an account icon appears in the mobile header.
* **Show social links**: When enabled, social media icons (such as Facebook, Instagram, Twitter, etc.) appear in the mobile header.

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