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

# Sticky Header

Keeps the header reachable as the customer scrolls, so they can navigate, search, or open the cart without scrolling back to the top.

![Sticky header — scrolled vs not scrolled](/files/JCXMuWFXfRrCLfUGpKk2)

***

## Sticky Type

Sets how the header behaves on scroll.

{% tabs %}
{% tab title="Always" %}
![Always sticky header](/files/MoL16JdeK3XUXP634sAq)

The header stays pinned to the top at all times.
{% endtab %}

{% tab title="On scroll up" %}
![On scroll up sticky header](/files/FU5YXH7IkVjioajtQUvF)

The header hides when scrolling down and reappears as soon as the customer scrolls up.
{% endtab %}

{% tab title="Top header only" %}
![Top header only sticky](/files/YkDeyi7IZd7u02oIbwjD)

Only the top row stays pinned; the rest of the header scrolls away with the page.
{% endtab %}

{% tab title="Bottom header only" %}
![Bottom header only sticky](/files/XYxdWdJmntqdTrFEpEdn)

Only the bottom row stays pinned; the rows above it scroll away. Useful when the main menu is in the bottom row.
{% endtab %}

{% tab title="None" %}
The header scrolls away with the page.
{% endtab %}
{% endtabs %}

***

## Boxed Layout

Available when sticky type is **Always**. As the customer scrolls, the sticky header shrinks into a compact floating bar instead of spanning the full width.

![Sticky header — standard vs boxed layout on scroll](/files/g3HJJ7zgY3AvSH76TZf6)

Works best with a header that has a solid background color, so the floating bar stands out against the page.

{% hint style="info" %}
Boxed layout is only for the desktop sticky header. The mobile header has its own setting in **Mobile Header → Sticky → Boxed layout**.
{% endhint %}

***

## Bottom Separator

The divider shown at the bottom of the sticky header while it's pinned over the page.

* **Line** — A thin line under the header.
* **Shadow** — A soft shadow under the header. Easier to see on image-heavy pages where a thin line can get lost.

{% hint style="info" %}
This separator only shows in the sticky state. When the page is at the top, the separator from the **Header Top / Bottom row settings** applies instead.
{% endhint %}