# Header

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FsknnB8u4IKlH45fuoQQA%2Fimage.png?alt=media&#x26;token=e5acb5f4-c0de-48ca-a0b6-f19a56dc638d" alt=""><figcaption></figcaption></figure>

## What is the Header section? <a href="#what-is-the-header-section" id="what-is-the-header-section"></a>

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, language selector, etc.

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

## How to edit the Header section <a href="#how-to-edit-the-header-section" id="how-to-edit-the-header-section"></a>

You can freely customize your header to suit your business needs by choosing the main menu and other addons.

{% hint style="success" %}
Steps:

1. In the theme editor (**Customize**), go to the **Header** area.
2. Select the **Header** section.
3. Make necessary changes.
4. Click **Save**.
   {% endhint %}

### General

#### Logo

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

#### Menus

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FErcGNQa67BfgDpNr75y3%2Fimage.png?alt=media&#x26;token=14a567a9-382e-4300-a4e2-ffa6a06b1ffc" alt=""><figcaption></figcaption></figure>

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

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

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

#### Header layout <a href="#header-layout" id="header-layout"></a>

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FrykuDsjmZaZPfOx9Z2aX%2Fimage.png?alt=media&#x26;token=7483d98f-48aa-482b-a11e-a0e3e72c59ec" alt=""><figcaption></figcaption></figure>

Choose how your logo is positioned on your desktop header:

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FfvL8qbnW1jolGarIHIUe%2Fimage.png?alt=media&#x26;token=760274a0-1189-49b3-b7e8-19247802107e" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Logo center" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FDjXYBHyGoAELmzX5Ty2o%2Fimage.png?alt=media&#x26;token=63c8a3d4-506e-48b9-8bc5-acd25a0d0330" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

#### Dropdown menu trigger

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FC8sXuxMlNWIq7ADM5vny%2Fimage.png?alt=media&#x26;token=01196fa9-a6f5-45d5-af5c-3b10108aa678" alt=""><figcaption></figcaption></figure>

Control how dropdown menus open on desktop:

* **Click**: Dropdowns open when clicked.
* **Hover**: Dropdowns open when the mouse pointer hovers over the menu item.

#### Header sticky <a href="#mobile-layout" id="mobile-layout"></a>

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FTAA9785qeO6J1uYE6e61%2Fimage.png?alt=media&#x26;token=1ce35341-6ded-4ab7-9dc8-7a1667f6ebc9" alt=""><figcaption></figcaption></figure>

Enable sticky behavior so the header remains visible while scrolling.

Options:

* **None**: Header does not stick.
* **Always**: Header stays fixed at the top.
* **On scroll up**: Header appears only when the user scrolls upward.

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FmPXHn74dXxA4zpBYgy19%2FNONe.gif?alt=media&#x26;token=d3fb19fb-03d5-46cc-8939-b949151db540" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Always" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FTGyN5Hwj8nxUWww1Cd4X%2FSticky.gif?alt=media&#x26;token=92e9191f-5df9-4ac4-90ff-0e9104984654" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FV53MMI00Rz7sk5hS0NA0%2F%20On%20scroll.gif?alt=media&#x26;token=869e304f-3f6f-43db-9bc6-051d033f2fa3" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

#### Search form

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FLtDjNrxzwac2bVacvlP5%2Fimage.png?alt=media&#x26;token=0a576d78-950a-4703-87cc-376647fe970e" alt=""><figcaption></figcaption></figure>

Turn on/off the **Enable search form** to display/hide the search bar in the header.

Under **Search form style**, choose how the search bar appears when opened:

* **Solid:** Search bar has a solid background.
* **Transparent:** Search bar blends with the header background.

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fc1cq0K6JJsZ4oD0qSnsO%2Fimage.png?alt=media&#x26;token=86b5d539-0687-452d-9c17-6db0ac71ff94" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Transparent" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FKpmagwgjTghMPHeRouKk%2Fimage.png?alt=media&#x26;token=928f4713-7362-4361-9bb0-234f4b48502d" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Mobile layout <a href="#mobile-layout" id="mobile-layout"></a>

<div align="center"><figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FbgR2Hs644pWjd0zaPkyg%2Fimage.png?alt=media&#x26;token=f5e06b47-835e-4f01-a7c1-d31792388427" alt=""><figcaption></figcaption></figure></div>

Toggle options for:

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FFlELG3HByXrEdcQArChn%2Fimage.png?alt=media&#x26;token=66bb0d35-9b6c-43dc-934f-321f293c7c77" alt="" width="305"><figcaption></figcaption></figure>

### Appearance

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FKrauJO4S5CciMSxozysa%2Fimage.png?alt=media&#x26;token=b82479bd-ec0c-4210-8b4e-fa339b976318" alt=""><figcaption></figcaption></figure>

Customize the appearance of your header.

* **Color scheme**: Choose a predefined color palette assigned under the [theme’s color settings](https://docs.foxecom.com/pebble-theme/theme-settings/colors).
* **Show bottom border**: Add a thin line below the header.

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FBP7sGJdmFgcDi36qLW3B%2Fimage.png?alt=media&#x26;token=bc0e64ea-2188-4b71-b2d4-70079ff19d49" alt=""><figcaption></figcaption></figure>

* **Show dividers on mobile**: Adds small dividers between icons such as search, cart, and menu. Helps improve clarity and touch targets on mobile screens.

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FcldduoQI80MYC5aKUefj%2Fimage.png?alt=media&#x26;token=6177a3a6-3cfa-45cb-a0cf-1b27a952afff" alt=""><figcaption></figcaption></figure>