> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/supra-shopify-theme/supra/sections-and-features/header.md).

# Header

Centred logo, live clock, and how the header behaves on phones.

The desktop header is a centred stack: logo, clock beneath it, then optional navigation. There's deliberately no top nav in the reference layout — navigation lives in the footer — so **Show top navigation** is off by default.

| Setting                 | Notes                                                                                                      |
| ----------------------- | ---------------------------------------------------------------------------------------------------------- |
| **Logo image**          | Leave empty to show the shop name in the boxed wordmark                                                    |
| **Show top navigation** | Off by default                                                                                             |
| **Menu**                | Only appears when navigation is on                                                                         |
| **Show live clock**     | Time zone and label come from [Theme settings → Clock](/supra-shopify-theme/supra/theme-settings/clock.md) |
| **Header on phones**    | Bar or Centred                                                                                             |
| **Show search icon**    | Opens predictive search                                                                                    |

## Header on phones

**Bar** (default) puts a back chevron, the logo, the cart count and a **checkout** button across the top, and stays there as the page scrolls. It's the shape a drop store wants — checkout is always one tap away.

**Centred** keeps the desktop arrangement, logo and clock stacked, on phones too.

## The checkout button goes to checkout

Not to the cart. The cart is already one tap away on the count box beside it, so a button labelled checkout does that instead of putting a page in between.

## Turning navigation on costs you grid height

The collection page fills exactly one screen. Adding the top nav makes the header taller, and the grid below it gets shorter to compensate. That's the trade — if you want the tallest possible grid, leave navigation in the footer where the reference has it.