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

# Header

The Header is the navigation area at the top of every page: your logo, main menu, localization controls, and the search, account, and cart actions. It is a global section, so changes apply across the whole storefront.

### 1. How to access the Header

{% stepper %}
{% step %}
**Open Themes**

From Shopify Admin, go to **Online Store > Themes**.
{% endstep %}

{% step %}
**Customize your theme**

Click **Customize**.
{% endstep %}

{% step %}
**Open the Header group**

In the left sidebar, open the **Header** group at the top of the page list.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
The Header appears on most pages, so you can edit it from any template.
{% endhint %}

### 2. How the Header is organized

```
Header                      [section]
├── Header content          [container]
│   ├── Logo
│   ├── Menu
│   ├── Localization
│   └── Utility
├── Mega menu: <name>       [optional, one per menu item]
├── Mega menu: <name>
└── ...
```

{% tabs %}
{% tab title="Header settings" %}
Section-level settings that control layout, height, sticky behavior, and the inside header mode.
{% endtab %}

{% tab title="Header content" %}
The container holding [Logo](/arctos-theme/blocks/basic/logo.md), [Menu](/arctos-theme/blocks/links/menu.md), [Localization](#id-4.3.-localization), and [Utility](#id-4.4.-utility).
{% endtab %}

{% tab title="Mega menu" %}
Optional rich panels that replace a standard dropdown for a specific menu item.

See [Mega menu](/arctos-theme/section-templates/header/mega-menu.md).
{% endtab %}
{% endtabs %}

### 3. Header settings

#### 3.1. General

**Main menu**

Chooses which navigation menu is displayed. Menus are created in **Shopify Admin > Online Store > Navigation**.

#### 3.2. Layout

**3.2.1. Desktop layout**

Arranges the logo and menu on desktop. Menu split divides menu items into two groups, one on each side of the logo.

**3.2.2. Mobile layout**

Arranges the logo and the menu toggle on mobile.

**3.2.3. Container width**

Controls how much horizontal space the header content occupies.

* **Inherit:** Uses the **Container width (default)** setting from [Theme settings → General → Container width](https://ursus-ecom.gitbook.io/arctos-theme/section-templates/pages/MtcWsJuspkVnqjnkw5Ur#id-2.-container-width).
* **Full width:** Always uses the full available width.
* **Standard:** Uses the Standard container width defined in [Theme settings → General → Container width](https://ursus-ecom.gitbook.io/arctos-theme/section-templates/pages/MtcWsJuspkVnqjnkw5Ur#id-2.-container-width).
* **Wide:** Uses the Wide container width defined in [Theme settings → General → Container width](https://ursus-ecom.gitbook.io/arctos-theme/section-templates/pages/MtcWsJuspkVnqjnkw5Ur#id-2.-container-width).

**3.2.4. Desktop height**

Sets the height of the header on desktop screens from **50px to 100px** (default: 60px).

**3.2.5. Mobile height**

Sets the height of the header on mobile screens from **40px to 80px** (default: 52px).

#### 3.3. Style

Control the section’s color scheme, background, and visual treatment. For detailed information about these settings, see [Group > Style](https://ursus-ecom.gitbook.io/arctos-theme/section-templates/pages/ABvGsQq7dgOOxcwgztbs#id-3.3.-style).

#### 3.4. Inside header

These settings control how the header is displayed inside selected pages. They are available when **Enable inside header** is turned on.

<details>

<summary>Enable inside header</summary>

Turns on the inside header treatment. It applies only to the pages selected under **Show inside header on**.

* **On** - Enables the inside header.
* **Off** - Uses the regular header.

</details>

<details>

<summary>Type</summary>

Controls the background treatment of the inside header.

* **Solid** - Keeps the header background visible.
* **Transparent** - Removes the header background so the content behind the header shows through.

</details>

<details>

<summary>Width</summary>

Controls the width of the inside header bar.

* **Full:** Makes the inside header bar span the full available width.
* **Boxed:** Constrains the inside header bar to the theme's standard content width.
* **Custom:** Sets a custom width for the inside header bar. Choose a value from **60% to 100%**.

</details>

<details>

<summary>Container width</summary>

Controls the content width inside the header when **Width** is set to **Full**.

* **Inherit:** Uses the **Container width (default)** setting from [Theme settings → General → Container width](https://ursus-ecom.gitbook.io/arctos-theme/section-templates/pages/MtcWsJuspkVnqjnkw5Ur#id-2.-container-width).
* **Full width:** Always uses the full available width.
* **Standard:** Uses the Standard container width defined in [Theme settings → General → Container width](https://ursus-ecom.gitbook.io/arctos-theme/section-templates/pages/MtcWsJuspkVnqjnkw5Ur#id-2.-container-width).
* **Wide:** Uses the Wide container width defined in [Theme settings → General → Container width](https://ursus-ecom.gitbook.io/arctos-theme/section-templates/pages/MtcWsJuspkVnqjnkw5Ur#id-2.-container-width).

</details>

<details>

<summary>Corner radius</summary>

Controls how rounded the corners of your frame are.

* **Main corner** matches the global corner radius set in your theme.
* **Small** and **Extra small** inherit from the [main corner](https://ursus-ecom.gitbook.io/arctos-theme/section-templates/pages/MtcWsJuspkVnqjnkw5Ur#id-1.-global-style-main-corner) value and scale it down proportionally for a subtler effect.
* **None** removes rounding entirely for a sharp, full-bleed look.
* **Custom** lets you set a precise value to match a specific design.

</details>

<details>

<summary>Margin</summary>

Adds space above and to the sides of the floating header bar. Margin values can be set separately for **desktop and mobile**.

</details>

#### 3.5. Transparent-only settings

Available when **Type** is set to **Transparent**.

<details>

<summary>Color scheme</summary>

Controls the color scheme used for the header text and icons over transparent backgrounds.

* **Default** - Uses the default color scheme.
* **Inverse** - Uses the inverse color scheme for better contrast over the background.

</details>

<details>

<summary>Inverse scheme</summary>

Sets the color scheme used when **Color scheme** is set to **Inverse**.

For better contrast, choose an inverse scheme that keeps the header content readable against the background. For example, use a light-text scheme when the transparent header sits over a dark background.

Color schemes are managed in [Theme settings → Colors](/arctos-theme/theme-settings/colors.md).

</details>

<details>

<summary>Inverse logo color</summary>

Controls whether the logo uses its inverse version when displayed over a transparent background.

* **On** - Uses the inverse logo.
* **Off** - Uses the default logo.

Set the inverse logo in [Theme settings → Logo and favicon](/arctos-theme/theme-settings/logo-and-favicon.md).

</details>

<details>

<summary>Display background when hover</summary>

Controls whether the header background appears when shoppers hover over a menu item.

* **On** - Fades in the header background while the dropdown is open.
* **Off** - Keeps the header background transparent.

</details>

<details>

<summary>Show border</summary>

Controls whether a border is displayed around the transparent header.

* **On** - Adds a border to define the header against the background.
* **Off** - Removes the border.

</details>

#### 3.6. Show inside header on

Controls which pages use the inside header and which color scheme is applied to each page.

<details>

<summary>Active pages</summary>

Choose where the inside header is enabled.

* **All** - Applies the inside header to all supported pages.
* **Custom** - Applies the inside header only to the selected page types or specific pages.

</details>

<details>

<summary>Page types</summary>

Available when **Active pages** is set to **Custom**.

Select the page types that should use the inside header:

* Home page
* Product page
* Collection page
* Collection list page
* Cart page
* Blogs page
* Blog posts page
* Search page
* 404 page

*When **Type** is set to **Transparent**,* each selected page type can use either the **Default** or **Inverse** color scheme.

</details>

<details>

<summary>Specific pages</summary>

Controls whether individual pages can be targeted in addition to the selected page types. *Available when **Active pages** is set to **Custom***.

* **On** - Enables targeting specific pages.
* **Off** - Applies the settings only based on the selected page types.

</details>

<details>

<summary>Pages to use default scheme (<em>Available when <strong>Type</strong> is set to <strong>Transparent</strong>)</em></summary>

Specifies which pages use the **default color scheme**.

Enter template types, template identifiers, or URL paths to target the relevant pages. Separate multiple entries with commas.

> **Notation**
>
> * **Template type** - The general kind of page. For example, `product` applies to every product page in your store across all languages.
> * **Template identifier** - A specific version of a template. For example, `product.default` applies only to product pages using the default product template, and works across all store languages. A custom template such as `product.sale` is a different identifier and needs its own entry.
> * **URL path** - Targets one exact storefront path. For example, `/products/red-shoes` applies only to that specific path. For multilingual stores, using template identifiers is recommended to target pages across all language subfolders.

**Examples:** `product`, `product.default`, `page.about-us`, `/products/red-shoes`

</details>

<details>

<summary>Pages to use inverse scheme (<em>Available when <strong>Type</strong> is set to <strong>Transparent</strong>)</em></summary>

Specifies which pages use the **inverse color scheme**.

Enter template types, template identifiers, or URL paths to target the relevant pages. Separate multiple entries with commas.

> **Notation**
>
> * **Template type** - The general kind of page. For example, `product` applies to every product page in your store across all languages.
> * **Template identifier** - A specific version of a template. For example, `product.default` applies only to product pages using the default product template, and works across all store languages. A custom template such as `product.sale` is a different identifier and needs its own entry.
> * **URL path** - Targets one exact storefront path. For example, `/products/red-shoes` applies only to that specific path. For multilingual stores, using template identifiers is recommended to target pages across all language subfolders.

**Examples:** `product`, `product.default`, `page.about-us`, `/products/red-shoes`

</details>

#### 3.7. Sticky header

Controls whether the header stays visible as shoppers scroll.

<details>

<summary>Enable sticky header</summary>

Controls whether the header remains visible while scrolling.

* **On** - Keeps the header visible while shoppers scroll.
* **Off** - Allows the header to scroll out of view.

</details>

<details>

<summary>Behavior</summary>

Controls when the sticky header is displayed.

* **Always** - Keeps the header pinned while scrolling.
* **On scroll up** - Hides the header while scrolling down and reveals it when shoppers scroll up.

{% hint style="info" %}
**Note:** `Behavior` only applies when **Enable sticky header** is set to **On**.
{% endhint %}

</details>

<details>

<summary>Enable drop shadow</summary>

Controls whether a shadow is displayed beneath the sticky header.

* **On** - Adds a shadow beneath the header.
* **Off** - Removes the shadow.

</details>

#### 3.8. Spacing

<details>

<summary>Padding</summary>

Controls whether horizontal padding is added inside the header.

* **On** - Adds left and right padding inside the header.
* **Off** - Removes the horizontal padding.

</details>

### 4. Header content settings

**Header content** is the container holding the four visible parts of the header. It has no settings of its own. Configure each block inside it.

#### 4.1. Logo

Displays your store logo, linked to the home page. The logo image is set in [Theme settings → Logo and favicon](/arctos-theme/theme-settings/logo-and-favicon.md).

<table><thead><tr><th width="190.33984375">Setting</th><th width="190.140625">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Link to home page</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Makes the logo clickable, linking to the home page</td></tr><tr><td><strong>Desktop height</strong></td><td>Number (16-60px)</td><td>Sets the logo height on desktop</td></tr><tr><td><strong>Mobile height</strong></td><td>Number (16-40px)</td><td>Sets the logo height on mobile</td></tr></tbody></table>

#### 4.2. Menu

Renders the menu chosen in **Header settings > Main menu**. The links, their order, and their nesting come from Shopify. This block controls how those links look and behave.

<details>

<summary>Desktop menu style</summary>

<table data-search="false"><thead><tr><th width="157.6875">Setting</th><th width="180.1171875">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Menu style</strong></td><td><ul><li>Classic</li><li>Underline</li><li>Boxed</li></ul></td><td>Sets how the active or hovered item is indicated</td></tr><tr><td><strong>Box style</strong></td><td><ul><li>Fill</li><li>Outline</li></ul></td><td>Sets the Boxed style variant</td></tr><tr><td><strong>Text style</strong></td><td><ul><li>Paragraph</li><li>Custom</li></ul></td><td><ul><li><strong>Paragraph</strong> inherits the Paragraph typography style from <a href="/arctos-theme/theme-settings/typography.md">Theme settings → Typography</a>.</li><li><strong>Custom</strong> lets you set the font size, line height, letter spacing, font weight, and case individually. See <a href="/arctos-theme/blocks/basic/text.md">Text</a> for details.</li></ul></td></tr><tr><td><strong>Gap</strong></td><td><ul><li>Default</li><li>0–32px</li><li>Custom</li></ul></td><td><p>Sets the horizontal spacing between top-level menu items</p><ul><li><strong>Default:</strong> Uses the default gap.</li><li><strong>0px–32px:</strong> Uses a predefined gap.</li><li><strong>Custom:</strong> Sets a custom gap value.</li></ul></td></tr><tr><td><strong>Disable other items on hover</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Dims the other menu items when one is hovered</td></tr><tr><td><strong>Dropdown menu trigger</strong></td><td><ul><li>Hover</li><li>Click</li></ul></td><td>Chooses whether dropdowns and mega menus open on hover or require a click</td></tr></tbody></table>

</details>

<details>

<summary>Mobile menu</summary>

<table data-search="false"><thead><tr><th width="154.69921875">Setting</th><th width="180.05078125">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Text style</strong></td><td><ul><li>Paragraph</li><li>Custom</li></ul></td><td><ul><li><strong>Paragraph</strong> inherits the Paragraph typography style from <a href="/arctos-theme/theme-settings/typography.md">Theme settings → Typography</a>.</li><li><strong>Custom</strong> lets you set the font size, line height, letter spacing, font weight, and case individually. See <a href="/arctos-theme/blocks/basic/text.md">Text</a> for details.</li></ul></td></tr><tr><td><strong>Divider</strong></td><td><ul><li>None</li><li>Line</li><li>Dot</li></ul></td><td>Separates mobile menu items</td></tr><tr><td><strong>Alignment</strong></td><td><ul><li>Left</li><li>Center</li><li>Right</li></ul></td><td>Aligns links within the mobile panel</td></tr><tr><td><strong>Gap</strong></td><td><ul><li>Default</li><li>4–32px</li><li>Custom</li></ul></td><td>Sets the vertical spacing between mobile menu links</td></tr></tbody></table>

</details>

#### 4.3. Localization

Lets shoppers switch language and country or region from the header. Both selectors are configured in this block.

These selectors only appear when there is something to switch between. Add languages in [Shopify Admin > Settings > Languages](https://admin.shopify.com/settings/languages) and countries or regions in [Shopify Admin > Settings > Markets](https://admin.shopify.com/markets).

<details>

<summary>Language selector</summary>

<table data-header-hidden><thead><tr><th width="193.796875"></th><th width="127.48046875"></th><th></th></tr></thead><tbody><tr><td><strong>Setting</strong></td><td><strong>Options</strong></td><td><strong>What it does</strong></td></tr><tr><td><strong>Language selector</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><p>Shows the language selector in the header.</p><p>The selector only switches between languages that are already available in the store. It does not translate your store content.<br>To translate content, use a translation app such as <a href="https://help.shopify.com/en/manual/international/translate-adapt-app">Shopify Translate &#x26; Adapt</a>.</p></td></tr><tr><td><strong>Show language code only</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><p>Controls whether the selector displays the language code or the full language name.</p><ul><li><strong>On</strong> - Shows the language code, such as <code>EN</code>.</li><li><strong>Off</strong> - Shows the full language name, such as <code>English</code>.</li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Country/region selector</summary>

<table data-header-hidden><thead><tr><th width="195.546875"></th><th width="132.4375"></th><th></th></tr></thead><tbody><tr><td><strong>Setting</strong></td><td><strong>Options</strong></td><td><strong>What it does</strong></td></tr><tr><td><strong>Country/region selector</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Shows the country or region selector in the header.</td></tr><tr><td><strong>Show currency only</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Shows the currency instead of the country or region name.</td></tr><tr><td><strong>Show country flag</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Displays a flag next to the country or region.</td></tr></tbody></table>

</details>

<details>

<summary>Layout</summary>

<table data-header-hidden><thead><tr><th width="189.31640625"></th><th width="131.74609375"></th><th></th></tr></thead><tbody><tr><td><strong>Setting</strong></td><td><strong>Options</strong></td><td><strong>What it does</strong></td></tr><tr><td><strong>Width</strong></td><td><ul><li>Fit</li><li>Fill</li><li>Custom</li></ul></td><td><p>Controls how much horizontal space the selectors occupy.</p><ul><li><strong>Fit</strong> takes up only the space needed by the content.</li><li><strong>Fill</strong> stretches to fill the available width.</li><li><strong>Custom</strong> lets you set a specific width.</li></ul></td></tr><tr><td><strong>Gap</strong></td><td>Number</td><td>Sets the spacing between the language and country/region selectors.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Lets you use different layout values on mobile.</td></tr></tbody></table>

</details>

<details>

<summary>Style</summary>

<table data-header-hidden><thead><tr><th width="181.19921875"></th><th width="139"></th><th></th></tr></thead><tbody><tr><td><strong>Setting</strong></td><td><strong>Options</strong></td><td><strong>What it does</strong></td></tr><tr><td><strong>Inherit color scheme</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Uses the color scheme inherited from the surrounding section when enabled.</td></tr><tr><td><strong>Text style</strong></td><td><ul><li>Paragraph</li><li>Custom</li></ul></td><td><ul><li><strong>Paragraph:</strong> Inherits the Paragraph text style from <a href="/arctos-theme/theme-settings/typography.md">Theme settings → Typography</a>.</li><li><strong>Custom:</strong> Lets you set the font size, line height, letter spacing, font weight, and case individually. See <a href="/arctos-theme/blocks/basic/text.md">Text</a> for details.</li></ul></td></tr><tr><td><strong>Show icon</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Displays an icon next to each selector.</td></tr><tr><td><strong>Show divider</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds a separator between the language and country/region selectors.</td></tr></tbody></table>

</details>

<details>

<summary>Spacing</summary>

<table data-header-hidden><thead><tr><th width="143.83984375"></th><th width="151.76953125"></th><th></th></tr></thead><tbody><tr><td><strong>Setting</strong></td><td><strong>Options</strong></td><td><strong>What it does</strong></td></tr><tr><td><strong>Padding</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds inner spacing around the localization controls.</td></tr><tr><td><strong>Margin</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds outer spacing around the localization controls.</td></tr></tbody></table>

</details>

#### 4.4. Utility

The action icons on the right of the header: search, account, and cart.

<table><thead><tr><th width="167.4765625">Setting</th><th width="143.0390625">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Enable search</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Shows the search control.</td></tr><tr><td><strong>Enable account button</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Shows the account link. Requires login links to be turned on in <a href="https://admin.shopify.com/settings/customer_accounts">Shopify Admin > Settings > Customer accounts</a>.</td></tr><tr><td><strong>Type</strong></td><td><ul><li>Icon</li><li>Text</li><li>Mix</li></ul></td><td>Displays each action as an icon, a text label, or both.</td></tr><tr><td><strong>Size</strong></td><td><ul><li>14px</li><li>16px</li><li>20px</li></ul></td><td>Sets the icon size.</td></tr><tr><td><strong>Style</strong></td><td><ul><li>Classic</li><li>Boxed</li></ul></td><td>Classic shows bare icons. Boxed places each action in its own container.</td></tr></tbody></table>

### 5. How navigation behaves on the storefront

#### 5.1. Dropdowns are built from your Shopify menu

Nest items inside your menu in **Shopify Admin > Online Store > Navigation**. The Header uses this menu structure to determine how navigation opens on the storefront.

<table><thead><tr><th width="169.31640625">Menu structure</th><th width="297.0703125">Example from the storefront</th><th>What shoppers see</th></tr></thead><tbody><tr><td><strong>Top-level item with no children</strong></td><td><code>About Us</code></td><td>Displays as a plain link</td></tr><tr><td><strong>Top-level item with children</strong></td><td><code>Men</code> → <code>Most Popular</code>, <code>Seasonal Collections</code>, <code>Tops &#x26; Outerwear</code>, <code>Bottoms</code></td><td>Opens a standard dropdown containing the child links (or a mega menu if configured)</td></tr><tr><td><strong>Child item with its own children</strong></td><td><code>Most Popular</code> → <code>Best Sellers</code>, <code>Bear-Smart Essentials</code>, <code>All Collections</code>, <code>All Products</code></td><td>Displays a further level of links within the dropdown or mega menu</td></tr></tbody></table>

The theme supports up to three levels of menu nesting.

#### 5.2. Mega menus replace dropdowns

If a menu item has a matching mega menu, the mega menu is shown **instead of** the standard dropdown. See [Mega menu](/arctos-theme/section-templates/header/mega-menu.md).

#### 5.3. Mobile navigation

On mobile the menu collapses into a panel opened from the header toggle. Items with a dropdown or mega menu show a forward control. Tapping it slides in the next level, with a breadcrumb back to the previous level.

Mega menu content is displayed in the same sliding panel rather than as a wide desktop panel. Menu blocks inside a mega menu can also be set to display as accordions on mobile.

### Related documentation

* [**Announcement bar**](/arctos-theme/section-templates/annoucement-bar.md) - the optional announcement strip above the Header
* [**Mega menu**](/arctos-theme/section-templates/header/mega-menu.md) - building rich navigation panels
* [**Shopify Help: Menus and links**](https://help.shopify.com/en/manual/online-store/menus-and-links) - creating and nesting menus
* [**Shopify Help: Selling in multiple languages**](https://help.shopify.com/en/manual/markets/languages) - adding languages
* [**Shopify Help: Markets**](https://help.shopify.com/en/manual/markets) - adding countries and regions