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

# Header Structure

The desktop header is built from two rows — **Top** and **Bottom**. You add blocks into a row, and each block picks its column with its own **Position** setting.

***

## How It Works

```
┌─────────────────────────────────────────────────┐
│  Top                                            │
│  [ Left ]        [ Center ]        [ Right ]    │
├─────────────────────────────────────────────────┤
│  Bottom  (optional)                             │
│  [ Left ]        [ Center ]        [ Right ]    │
└─────────────────────────────────────────────────┘
```

The **Top** row is always part of the header and can't be removed. **Bottom** is optional — add it when you want a two-row layout, such as logo and icons on top with a full navigation bar below. It stays hidden while it has no blocks.

Columns aren't blocks. Each block has a **Position** setting — Left, Center, or Right — and the theme groups blocks into columns from that. The Center column always sits in the middle of the header and only appears when at least one block is set to Center.

{% hint style="info" %}
Any block can be positioned in the center — not just the logo.
{% endhint %}

***

## 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** to Left, Center, or Right.

**Step 3** — Optionally add a **Bottom** block for a second row, then repeat.

![Header block hierarchy in the theme editor](/files/jfVEZyV2DtthpV8UprRT)

{% hint style="info" %}
Within a column, blocks appear in the order they are listed in the theme editor. Drag them to reorder.
{% endhint %}

***

## Common Layouts

{% tabs %}
{% tab title="Logo left" %}
![Logo left, menu centered, action icons on the right](/files/bmwkUw9UDtamKnFHX8KN)

Logo on the left, menu in the center, action icons on the right.

**All blocks in the Top row:**

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

{% tab title="Logo center" %}
![Logo centered, menu on the left, action icons on the right](/files/3Ixq3A9rYG2jvtHsgj6r)

Menu on the left, logo in the center, action icons on the right.

**All blocks in the Top row:**

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

{% tab title="Two-row" %}
![Two-row header — search, logo, and icons on top; menu below](/files/9IgiYABBiZunVxqjIYIJ)

Search, logo, and action icons on the top row; the menu in its own bottom row.

**Setup:**

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

***

## Row Settings

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

* **Bottom separator** — the divider shown at the bottom of the row: none, a line, or a shadow.
* **Gap** — the spacing between blocks inside the row. One value applies to all three columns.
* **Padding** — the space above and below the row's content, which sets the row height.

***

## Width

Sets how wide the header content spans.

* **Page** — Keeps the header content within the page width set in your theme settings.
* **Full** — Stretches the header content across the full browser width, with a small space at the edges.