> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/set-up-your-store/header-group/header.md).

# Header

The **Header** is the navigation strip that appears at the top of every page of your store. It carries your logo, the main menu (including any mega menus), and the search, account, cart, and offer icons, so shoppers can move around your catalog and reach their cart from anywhere. You also control how it behaves while scrolling and whether it turns transparent over a full-width homepage banner.

Because this is a global section, the settings below apply to the whole store, not to a single page.

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

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

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

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, open the **Header** group.
3. Click **Header**.
4. Use the setting groups on the right (**General settings**, **Menu**, **Mobile menu settings**, **Addons**, **Transparent header**, **Section padding**).
   {% endhint %}

*Result:* the header settings open and the preview scrolls to the top of the page, so every change is visible immediately.

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

### General <a href="#general-settings" id="general-settings"></a>

Customize the overall layout, color scheme, logo position, and header behavior for your section.

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

| Setting                   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width**         | <p>How far the logo, menu, and icons spread across the top of the screen.</p><ul><li><strong>Stretch width</strong>: runs the whole browser width whatever screen the visitor is on.</li><li><strong>Fixed width</strong>: keeps the logo and icons in line with your page content, using the width set in <strong>Theme settings > Layout</strong>. Pick this when you want the header to sit over the content rather than float above it.</li><li><strong>Full width</strong>: fills the screen edge to edge and resizes with it, which pushes the logo and cart into the far corners.</li></ul> |
| **Color scheme**          | The background, text, and icon colors of the header, taken from the schemes in **Theme settings > Colors**.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| **Desktop logo position** | <p>How the brand and the navigation share the top row on desktop.</p><ul><li><strong>Logo left, menu center</strong>: the arrangement most shoppers expect, and it leaves the most room for a long menu.</li><li><strong>Logo center, menu left</strong>: puts the brand name in the middle of the screen, which suits stores with a short menu and a name worth reading first.</li></ul><p><em>Note: Logo position is automatically optimized for mobile.</em></p>                                                                                                                                |
| **Sticky header**         | <p>Whether navigation follows shoppers down a long page or scrolls away with the rest of the content.</p><ul><li><strong>None</strong>: it scrolls out of sight, so shoppers return to the top to change section.</li><li><strong>On scroll up</strong>: it comes back the moment they scroll upward, keeping the screen clear the rest of the time.</li><li><strong>Always</strong>: it stays on screen throughout, so search and cart are one click away on long collection pages.</li></ul>                                                                                                     |

### Menu <a href="#menu" id="menu"></a>

Customize your site's main menu by selecting a menu and configuring how the desktop dropdown menu is triggered, as well as the dropdown animation style.

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

| Setting                           | Description                                                                                                                                                                                                                                                                                   |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Menu**                          | Which of your Shopify menus shoppers navigate the store with. Build and reorder the items themselves in **Shopify admin > Content > Menus**.                                                                                                                                                  |
| **Desktop dropdown menu trigger** | Whether a submenu opens as soon as the pointer passes over an item, or only after a click. Hovering feels faster, clicking stops menus from opening by accident when someone is just moving the mouse across the page.                                                                        |
| **Dropdowns animation**           | <p>How a submenu arrives on screen when it opens.</p><ul><li><strong>Fade in</strong>: it simply appears, the quietest of the three.</li><li><strong>Fade in down</strong>: it appears while sliding downward.</li><li><strong>Down to up</strong>: it rises into place from below.</li></ul> |

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

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

| Setting                     | Description                                                                                                                       |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **Hamburger icon position** | Where the menu button sits in the mobile header. Keep it away from the cart so shoppers with one thumb do not open the wrong one. |

### Addons <a href="#addons" id="addons"></a>

Addons offer additional settings for the header, including features like search, currency selector, language selector, and more. Enable the relevant checkboxes to activate them.

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

| Setting                | Description                                                                                                                                                                    |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Show search icon**   | Gives shoppers a way to type what they want from any page. Worth turning on once your catalog is large enough that browsing the menu takes several clicks.                     |
| **Show account icon**  | Gives returning customers a way into login, their orders, and their saved addresses.                                                                                           |
| **Show shopping cart** | Lets shoppers see what they have added and reach checkout from any page, without hunting for the cart.                                                                         |
| **Show offer**         | Adds the icon that opens the [Offers popup](/velare/customize-your-pages/overlay-group/offers-popup.md). Turn it off between campaigns so shoppers do not open an empty popup. |

#### Country/language selector <a href="#country-language-selector" id="country-language-selector"></a>

| Setting                            | Description                                                                                                                                                                                   |
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Enable country/region selector** | Lets shoppers pick their own country or region, so they browse the market you set up for them instead of your default one. Requires **Markets** to be configured in your Shopify admin first. |
| **Enable language selector**       | Lets shoppers read the store in the language they are most comfortable with. Only worth turning on once more than one language is published in your Shopify admin.                            |

### Transparent header <a href="#transparent-header" id="transparent-header"></a>

A transparent header is a see-through top section on a website or mobile app, allowing the content or background to show through instead of having a solid color background.

Ensure the first section on your homepage is configured as one of the following: a Slideshow, a Video with a text overlay, or an Image with a text overlay.

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

| Setting                       | Description                                                                                                                                                                                                                    |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Enable transparent header** | Lets your homepage banner run behind the navigation instead of starting below a solid bar, so the first screen reads as one full image. Applies to the homepage only.                                                          |
| **Text and icon**             | The color the logo, menu, and icons take while the header sits over that banner. Choose a shade that stays readable against the image, usually white over a dark photo. Only applies when **Enable transparent header** is on. |

### Section padding <a href="#section-padding" id="section-padding"></a>

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

| Setting    | Description                                                                                                 |
| ---------- | ----------------------------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the logo and menu. Increase it when the header feels cramped against the announcement bar. |
| **Bottom** | Adds space below the logo and menu, which sets how much air there is before the page content begins.        |

### Mega menus <a href="#mega-menus" id="mega-menus"></a>

The header supports three mega menu types. Each one is tied to a level 1 menu block item by name, so pick the type that matches what you want to show behind that item:

* [Banner ( Mega menu )](/velare/set-up-your-store/header-group/header/banner-mega-menu.md): collection columns plus up to five promotional banners and a button. Best for campaigns.
* [Product ( Mega Menu )](/velare/set-up-your-store/header-group/header/product-mega-menu.md): a grid of selected products. Best for best sellers and new arrivals.
* [Collection ( Mega Menu )](/velare/set-up-your-store/header-group/header/collection-mega-menu.md): a grid of selected collections. Best for a large catalog you want browsed by category.

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* The header renders on every page. Only the transparent style is limited to the homepage.
* The icons you enable under **Addons** open the overlay sections: search opens [Search](/velare/customize-your-pages/overlay-group/search.md), the cart icon opens the [Cart drawer](/velare/customize-your-pages/overlay-group/cart-drawer.md) when the drawer cart type is selected, and the offer icon opens the [Offers popup](/velare/customize-your-pages/overlay-group/offers-popup.md).
* With **Sticky header** set to **On scroll up** or **Always**, the header stays reachable while shoppers scroll long collection pages.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Header group](/velare/set-up-your-store/header-group.md): the group this section belongs to
* [Announcement bar](/velare/set-up-your-store/header-group/announcement-bar.md): the strip directly above the header
* [Mobile navigation bar](/velare/set-up-your-store/mobile-navigation-bar.md): the mobile bar that duplicates key header actions
* [Colors](/velare/set-up-your-store/colors.md) and [Layout](/velare/set-up-your-store/layout.md): the schemes and content width used above
* [Search behavior](/velare/customize-your-pages/search-behavior.md): what the search icon returns


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/set-up-your-store/header-group/header.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.