# Header

<figure><img src="/files/quIT7hxMpyJnHEEuuF8P" 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](/pebble-theme/theme-settings/logo.md)**.**
{% endhint %}

#### Menus

<figure><img src="/files/F5CeHjIgZYhTpSYL54xZ" 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="/pages/RXpo7YzAxQNqzQz1NBPT" %}
[Mega menu](/pebble-theme/global-sections/header/mega-menu.md)
{% endcontent-ref %}

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

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

Choose how your logo is positioned on your desktop header:

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

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

{% tab title="Logo center" %}

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

#### Dropdown menu trigger

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

{% tab title="Always" %}

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

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

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

#### Search form

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

{% tab title="Transparent" %}

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

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

<div align="center"><figure><img src="/files/9nme3qcYI8adxJ5i4qpT" alt=""><figcaption></figcaption></figure></div>

Toggle options for:

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

<figure><img src="/files/SQGOHBz9inyfQXP6IeE9" alt="" width="305"><figcaption></figcaption></figure>

### Appearance

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

Customize the appearance of your header.

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

<figure><img src="/files/vbOG1j7FhEWXXHX38Up9" 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="/files/SP00ZokSxq7Z3Q83rioF" alt=""><figcaption></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/pebble-theme/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.