> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/header-and-footer/mobile-navigation.md).

# Mobile navigation

How Stratum navigates on phones - the menu drawer, the header that hides on scroll up, the bottom navigation bar and the back to top button.

On phones, Stratum gives shoppers one navigation at a time so the page stays uncluttered:

* **Scrolling down**: the header stays pinned at the top.
* **Scrolling up**: the header slides away and a floating **bottom navigation bar** scales in with Home, Shop, Account and Bag.
* **At the top of the page**: the header sits in its normal place.

![Header and bottom bar while scrolling on a phone](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-b51ce9c27317f4babc927521a9a2da945b60dbe0%2Fmobile-navigation.gif?alt=media)

{% file src="/files/AGNNewOT0rrk3ReKcol7" %}
Watch the video (MP4)
{% endfile %}

## The menu drawer

On phones and small tablets, the main menu moves into a full-screen drawer. Shoppers open it with the menu icon (three lines) at the left of the header.

![Mobile menu](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-93dcde3b7c4e44679be9cd49042dbc3958397ca6%2Fmobile-menu.png?alt=media)

What the drawer contains:

* Every top-level item of the header's **Main menu**, in large type.
* Items with a submenu expand in place (tap **+** to open, **−** to close). Only one expands at a time. Third-level links are listed under their parent, and a **See all** link closes each group. For a collection link it shows the number of products.
* Your utility links (the header's **Header menu** and **Header link** blocks) at the bottom.
* The country and language selectors, when **Show country and language selectors** is on in the header and your store sells in more than one country or language.

![Opening and closing the mobile menu](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-205d01b72aeb7c160b0abc3b654dde38a2e691aa%2Fmobile-menu.gif?alt=media)

{% file src="/files/CHbHg6wCS3mnHm3y36S7" %}
Watch the video (MP4)
{% endfile %}

The drawer uses the header's **Color scheme**. It closes with the close button or Escape on a keyboard. The menu comes from **Online Store › Navigation**; see [Header, menus and search](/header-and-footer/header.md#set-up-the-main-menu).

## The bottom navigation bar

![Bottom navigation bar](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-773a5f1777c2398e69250b274c4abb1f253139d2%2Fmobile-bottom-bar.png?alt=media)

A floating, rounded bar with four items:

| Item        | Goes to                                                                                                                                |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| **Home**    | Your home page.                                                                                                                        |
| **Shop**    | The all collections page (`/collections`), see [All collections page](/collections-and-search/all-collections.md).                     |
| **Account** | The customer account page. When customer accounts are turned off, this item becomes **Search** instead.                                |
| **Bag**     | Opens the cart drawer (or the cart page, depending on **Theme settings › Cart › Cart type**). A small badge shows the number of items. |

The item for the page the shopper is on is highlighted with a soft pill: Home on the home page, Shop on collection, all collections and product pages, Bag on the cart page, Account on account pages and Search on the search page.

### Turn it on or off

1. Go to **Online Store › Themes › Customize**.
2. Click the **gear icon (Theme settings)** at the bottom of the left sidebar.
3. Open **Navigation**.
4. Turn **Show bottom navigation bar on mobile** on or off. It is on by default.
5. Click **Save**.

The four items are fixed. You cannot change their links or labels in the editor.

### How it behaves

* It is hidden when a page loads and appears the first time the shopper scrolls up.
* It springs up from the bottom with a slight scale, and shrinks away when the shopper scrolls down.
* At the very bottom of a page it stays as it was, so the bounce of the browser does not make it flicker.
* While it shows, the back to top button, the **Cookie settings** button and the compare bar move up so nothing overlaps.
* It only appears on screens narrower than 768px. Tablets in landscape and computers never show it.
* For visitors who ask their device to reduce motion, it appears and disappears with a simple fade.

{% hint style="info" %}
The header only slides away on scroll up when the bottom bar is turned on, so shoppers always have a way to navigate. With the bar turned off, the header stays pinned on phones as it does on desktop (as long as **Keep header visible on scroll** is on in the header).
{% endhint %}

## Header on phones

On phones, the header shows the menu icon, your logo, the account icon and the bag. With **Search** set to **Search field**, the search field sits in a second row under the logo. With **Icon** or **Icon and text**, a search icon opens the field below the header.

**Keep header visible on scroll** (in the header section) controls whether the header is pinned at all:

| Keep header visible on scroll | Bottom navigation bar | What happens on phones                                                                  |
| ----------------------------- | --------------------- | --------------------------------------------------------------------------------------- |
| On                            | On                    | Pinned while scrolling down; slides away and the bottom bar appears while scrolling up. |
| On                            | Off                   | Always pinned.                                                                          |
| Off                           | On or off             | Scrolls away with the page; the bottom bar still appears on scroll up when turned on.   |

The header never hides while a shopper is typing in its search field, and it stays in place near the top of the page.

## Back to top button

A round button with an up arrow appears at the bottom right after visitors scroll down about two screens. It scrolls smoothly back to the top (instantly for visitors who reduce motion) and moves keyboard focus to the main content.

Turn it off in **Theme settings › Navigation › Show back to top button** (on by default).

## Related

* [Header, menus and search](/header-and-footer/header.md)
* [Theme settings reference: Navigation](/reference/theme-settings.md)