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

# Header Structure

The mobile header uses the same block system as desktop — a **Header Top** row whose blocks each pick a left, center, or right position, plus an optional **Header Bottom** row for a secondary strip. What differs is which blocks each row accepts and the layouts that work well at narrow widths.

***

## How It Works

```
┌──────────────────────────────────────────┐
│  Top                                     │
│  [ Left ]    [ Center ]    [ Right ]     │
├──────────────────────────────────────────┤
│  Bottom  (optional)                      │
│  [ Quick links ]  or  [ Search bar ]     │
└──────────────────────────────────────────┘
```

The **Top** row is always part of the header. It accepts: Menu toggle, Logo, Search, Cart, Account, and Recently viewed.

Columns are not blocks. Each top-row block has a **Position** setting, and the theme groups blocks into the left, center, and right columns based on that value. The center column stays centered no matter what sits beside it.

{% hint style="info" %}
Any top-row block can be centered — not just the logo.
{% endhint %}

The **Bottom** row accepts only Quick links and Search bar. Use it as a secondary strip — for example a full-width search bar below the icon row, or a set of shortcut links.

***

## How to Set Up

**Step 1** — Add your blocks to the **Top** row in the order you want them.

**Step 2** — Open each block and set its **Position**.

**Step 3** — Optionally add a **Bottom** block for a Quick links strip or a Search bar.

![Mobile header block layout in the theme editor](/files/vIMLrj1D8kLhPE21P75J)

***

## Common Layouts

{% tabs %}
{% tab title="Standard" %}
![Standard mobile header — toggle left, logo center, cart right](/files/FY2NssKVdCqba4mgD2S2)

The most common mobile pattern. Menu toggle on the far left, logo centered, and Search and Cart on the right.

**Setup — all blocks in the Top row:**

* Menu toggle → **Position: Left**
* Logo → **Position: Center**
* Search, Cart → **Position: Right**
  {% endtab %}

{% tab title="Toggle + Logo left" %}
![Mobile header — toggle and logo left, icons right](/files/ijqV0leUYdoCWCS7QOvH)

Logo and toggle grouped on the left, action icons on the right.

**Setup — all blocks in the Top row:**

* Menu toggle, Logo → **Position: Left**
* Search, Cart → **Position: Right**
  {% endtab %}

{% tab title="With search bar" %}
![Mobile header — toggle, logo, cart on top + search bar below](/files/UdTlQJjAUE20oJLeftQz)

Main icons on the top row with an always-visible search input in the bottom row. Use when search is a primary way customers find products.

**Setup:**

* Top row → Menu toggle (**Position: Left**), Logo (**Position: Center**), Cart (**Position: Right**)
* Bottom row → Search bar
  {% endtab %}
  {% endtabs %}

{% hint style="info" %}
**UX tip:** Keep the top row to 3–4 elements. Crowding icons at mobile widths shrinks tap targets and leads to accidental taps. Anything beyond Cart, Search, and Account belongs in the mobile menu drawer.
{% endhint %}

***

## Row Settings

Each row — Header Top and Header Bottom — has its own settings.

### Bottom Separator

Sets the divider shown at the bottom of the row.

### Padding

Sets the row height through vertical spacing around its content.

* **Padding top** — space above the content
* **Padding bottom** — space below the content

{% hint style="info" %}
**UX tip:** A tall header eats into the visible content area on mobile. Keep the combined row height tap-friendly but compact.
{% endhint %}

***

## Gap

The **Top** row has a **Gap** setting that controls the horizontal spacing between blocks. One value applies to all columns. Keep it tighter than on desktop so icons stay within the header at narrow widths.

{% hint style="info" %}
The **Bottom** row has no gap setting; it holds a single full-width block.
{% endhint %}

***

## Breakpoint

The **Mobile header breakpoint** sets the screen width where the theme switches from the desktop header to the mobile header. Below this width the desktop header is hidden and the mobile header appears. Raise it if your desktop navigation starts to wrap before the switch; lower it if the desktop header still fits at narrower widths.