> 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

Customize your store's header — navigation layout, desktop and mobile arrangements, transparent overlays, sticky behCustomize your store's header navigation layout, desktopavior, borders, and spacing.

<figure><img src="https://193928255-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9PfGmHWEt81G4XNeDZqZ%2Fuploads%2F0JqGSDaw79KPCZRWalQ7%2FHeader.webp?alt=media&amp;token=f017e800-3db1-4dd9-9944-3124b4819344" alt=""><figcaption></figcaption></figure>

The Header is the navigation bar anchored at the top of every page on your store. It holds your brand's logo, primary navigation links, search, and cart icons. Because it appears on every page, a well-configured header makes your store feel trustworthy, polished, and easy to explore.

The Header is automatically placed at the top of every page — you do not need to add it manually.

***

### What you can customize

* **Navigation layout** — define the alignment of your logo relative to your menu links on both desktop and mobile
* **Transparent overlays** — make the header transparent over hero imagery so your photography shines through
* **Sticky behavior** — keep the menu docked to the top of the browser as customers scroll down long pages
* **Borders and spacing** — add visual dividers or adjust padding to frame the header
* **Color schemes** — override global colors to build a high-contrast or perfectly blended navigation bar

***

### How to access this template

1. In the **Theme Editor (Customize)**, click the **template selector** dropdown at the top center.
2. Select **Header**.
3. Under the *Header group* on the left sidebar, click the **Header** section to reveal its settings.

{% hint style="info" icon="note-sticky" %}
**Note:** The basic Header settings apply globally across all pages. If you want a transparent header on your Homepage but a solid header on Product pages, use the **Inside header** configuration covered below.
{% endhint %}

***

### Layout settings

These settings control the structural arrangement of your navigation elements across different screen sizes.

**Desktop layout**

Controls the placement of your logo and primary navigation links on monitors and laptops.

**Options:**

* *Logo left, menu center* — Logo anchors the left edge; links sit centered.
* *Logo left, menu left* — Logo on the left; links immediately follow it. Works well for text-heavy menus.
* *Logo left, menu right* — Pushes the links to the far right alongside the cart.
* *Logo center, menu left* — Centers your logo; navigation links sit to the left.
* *Logo center, menu split* — Centers your logo and splits the menu links evenly on either side of it.

{% hint style="success" icon="lightbulb" %}
**Tip:** The *Logo center, menu split* layout works best for brands with an even number of top-level navigation items. It creates a balanced, editorial look that feels premium — especially on large desktop screens.
{% endhint %}

**Mobile layout**

Controls the arrangement on phones, where screen space is limited.

**Options:**

* *Logo left, menu right* — Logo anchors left; hamburger icon anchors right.
* *Logo center, menu left* — Logo sits center; hamburger icon anchors left.
* *Logo center, menu right* — Logo sits center; hamburger icon anchors right.
* *Logo right, menu left* — Hamburger on the left; logo sits to the right.

**Container width**

Controls the maximum width of the area containing your logo and menu links.

**Options:** *Inherit / Full width / Standard / Wide*

{% hint style="info" icon="note-sticky" %}
**Note:** On mobile, the container is always full width to prevent the logo or menu icons from getting squeezed too close together.
{% endhint %}

***

### Style settings

**Inherit color scheme**

When enabled, the header background and text colors match your theme's default global values, keeping your navigation visually consistent with the rest of your store.

**Color scheme**

When **Inherit color scheme** is disabled, pick a specific color scheme for the header. Use this to create a bold, contrasting navigation bar — for example, a dark header on a light-colored store.

**Enable border**

Adds a 1-pixel line to frame the header. This is a subtle way to separate a light header from a light page background without using drop shadows.

**Options:** Toggle Top, Bottom, Left, and Right borders independently.

***

### Inside header (Transparent overlay)

The **Inside header** settings let you override your standard solid header on specific pages — so it floats transparently over hero images or videos on pages like your homepage.

**Enable inside header**

Turn this on to apply transparent or alternate header styling to selected pages.

**Type**

Controls whether the inside header remains solid or becomes fully transparent.

**Options:**

* *Solid* — Retains a background color, but can use a different color scheme from your main header.
* *Transparent* — Removes the background entirely. The header floats directly over whatever section sits beneath it.

**Inverse scheme**

When **Type** is set to *Transparent*, your standard dark text may become invisible over a dark photograph. Select an Inverse scheme (typically one with light or white text) so your links stay readable against rich background imagery.

**Inverse logo color**

When **Type** is set to *Transparent*, this swaps your logo to its alternate (lighter) version — keeping it legible against dark or colorful backgrounds.

**Display background when hover**

When enabled, hovering over the transparent header fills it with a solid background color. This ensures dropdown menus are easy to read against the header.

**Active page**

Controls which pages receive the transparent header treatment.

**Options:**

* *All* — Applies transparency across all pages.
* *Custom* — Opens checkboxes so you can restrict transparency to specific pages — for example, only the Home page or specific collection templates.

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

* The most common setup: set **Enable inside header** to on, **Type** to *Transparent*, and **Active page** to *Home page* only.

***

* This gives you a cinematic, edge-to-edge home page hero while keeping a clean solid header across product pages and collections — where customers need clear navigation most.
  {% endhint %}

***

### Sticky header

A sticky header stays fixed at the top of the browser window while customers scroll, keeping your navigation and cart always accessible.

**Enable sticky header**

Turn this on to keep the header visible while customers scroll down the page.

**Behavior**

Controls exactly how the sticky header behaves during scrolling.

**Options:**

* *Always* — The header remains visible at all times while scrolling.
* *On scroll up* — The header hides as the customer scrolls down (to give more screen space), then reappears the moment they scroll back up.

{% hint style="success" %}
**Tip:** *On scroll up* is the preferred behavior for most modern stores. It respects the customer's screen space — especially important on mobile — while keeping the header instantly accessible whenever they look for it.
{% endhint %}

***

### Tips & best practices

{% hint style="success" %}
**Tip:** Upload two logo files in **Theme settings** → **Logo and favicon** — your brand-color logo as the primary, and an all-white version as the inverse logo. This ensures your logo stays legible whether the header is solid or transparent.
{% endhint %}