> 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/mobile-header/sticky-header.md).

# Sticky Header

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

![Mobile sticky header — scrolled vs not scrolled state](/files/H0DBtFjiD2lU3SigjOuX)

***

## Sticky Type

Sets how the mobile header behaves on scroll.

{% tabs %}
{% tab title="Always" %}
![Always sticky on mobile](/files/4CGMNhF9uSTfYGbKguVK)

The header stays pinned to the top of the screen at all times, including while scrolling down.
{% endtab %}

{% tab title="On scroll up" %}
![On scroll up on mobile](/files/2m3i6rtBKgXrHpxqGAl3)

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

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

Only the top row stays pinned while scrolling. The rows below scroll away with the page.
{% endtab %}

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

Only the bottom row stays pinned while scrolling. The rows above scroll away — useful when the main navigation lives in the bottom row.
{% endtab %}

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

***

## Boxed Layout

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

![Mobile sticky header — standard vs boxed on scroll](/files/fUuBxqujCnCPEqRB78pw)

Works best with a compact header and a color scheme that has a clear background color.

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

***

## Bottom Separator

The divider shown at the bottom of the sticky header while it is pinned over page content.

* **Line** — A thin border line at the bottom of the header.
* **Shadow** — A soft drop shadow beneath the header. More visible on image-heavy pages.

{% hint style="info" %}
This separator only shows while scrolled. At the top of the page, the separator from the **Header Top row settings** applies instead.
{% endhint %}