> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/zest-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/zest-theme/pages-global-sections/header.md).

# Header

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

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.&#x20;

## 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 style="success" %}
Steps:

1. Go to **Online Store >** **Themes > Customize.**
2. Choose **Header** section.
3. Make necessary changes **> Save.**
   {% endhint %}

### General

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

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

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

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

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

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

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

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

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

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

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

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

<figure><img src="/files/51KY4ARJbvt4etcO52tF" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The Sticky behavior option is only available in Zest **version 9.0.0 and above**. :sparkles:

See [Changelog](https://help.foxecom.com/changelog/zest?utm_source=foxecom\&utm_medium=help_center_zest_header\&utm_campaign=anchor_text\&utm_term=changelog).
{% endhint %}

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

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

{% tab title="Always" %}

<figure><img src="/files/sq3OZ9sV3RNZpK2c0Anw" alt="Zest theme&#x27;s sticky header"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="No effect" %}

<figure><img src="/files/MjmK3cXORVrkFLFNBK9H" alt="Zest theme&#x27;s header with no effect"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

{% hint style="warning" %}
This feature works on Home page only.
{% endhint %}

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

### Logo settings

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

{% hint style="info" %}
The recommended image size and format is 200x80px .png with a transparent background.
{% endhint %}

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

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

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

<figure><img src="/files/5A2DhISzjGkGcBF3XjE6" alt=""><figcaption></figcaption></figure>

### Menu settings

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

<figure><img src="/files/Flhh6VkHSQLJD6GFFzWN" 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 %}

* 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](/zest-theme/pages-global-sections/menu/add-a-banner-to-mega-menu.md)

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

### Addons

<figure><img src="/files/9VwVV2CZrJvMGT3h2bWn" alt=""><figcaption></figcaption></figure>

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;

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

* **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 style="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;
{% endhint %}

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

{% content-ref url="/pages/zLACd0QRSEYwIFlG608B" %}
[Countries/ Regions](/zest-theme/languages-and-countries-regions/countries-regions.md)
{% endcontent-ref %}

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

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

{% content-ref url="/pages/Bft3weZDWfqYQxeXI0y3" %}
[Languages](/zest-theme/languages-and-countries-regions/languages.md)
{% endcontent-ref %}

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

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

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

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

{% tab title="Center" %}

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

{% tab title="Right" %}

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

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

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

<figure><img src="/files/1S5E9keOijJ5Axk0ind7" alt=""><figcaption></figcaption></figure>

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

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