# Header

> The header carries your logo, your menu, the search, the account and cart links, and the language, country and dark mode switches. It comes in three layouts and adapts to any screen.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/header/

## At a glance

- **In the editor:** Header
- **Where it goes:** The Header group, on every page
- **In the presets:** Tally: Header group; Poster: Header group; Petal: Header group
- **Settings:** 40
- **Blocks:** link, dropdown
- **App blocks:** No

The header lives in the **Header** group and appears on every page. For a walk-through of menus, dropdowns and the shop panel, see the [Header and footer guide](https://themelab.page/tally/docs/header-and-footer.md).

## Choose a layout

| Layout | Used by | Best for |
| --- | --- | --- |
| **Logo left, search bar in the middle** | Tally | Large catalogs where search is the fastest way in. The search bar sits front and centre. |
| **Logo centered, menu below** | Poster | Brands with a strong logo and a short menu, shown on its own row. |
| **Menu left, logo centered** | Petal | A balanced, editorial header. Search opens from an icon. |

On phones, the centered and split layouts put the logo in the middle of the row, between the menu button and the cart.

## Logo

The header uses the logo from **Theme settings › Logo and favicon** unless you upload a different one here – useful when the header needs a horizontal version of your logo. Set its width for desktop and mobile separately. **Show store name next to the logo** adds your store name beside a logo mark, in the text logo size.

## Transparent header

**Transparent header** lays the header over a full-width Image banner, Slideshow or Video at the top of the page – on the home page only, or on every page, with light or dark text. It turns solid the moment it is needed: on hover, when a menu opens and as soon as the page scrolls. Upload a **Logo on the transparent header** (a white version, for example) so the logo stays legible over the photo.

> **Note**
>
> The transparent header needs a full-width banner as the first section of the page. On pages that start with anything else, it stays solid.

## Sticky header

- **Always:** the header stays at the top of the screen.
- **On scroll up:** it slides away while shoppers scroll down to read and returns as soon as they scroll up – the most room for content.
- **None:** the header scrolls away with the page.

## Menu

Pick the menu from **Online Store › Navigation** in **Menu**. Tally reads its structure:

- Links with **one level** of sub-links open a compact dropdown.
- Links with **two levels** open the **full-width shop panel** – one column per second-level link, with its own links below. **Open every dropdown as the full-width panel** uses the panel for every dropdown.
- **Images in full-width panels** puts the image of each column's collection, product or blog post above it.
- **Show product counts next to collection links** adds a quiet count after each collection.
- **Show a shop all link in the panel** closes the panel with a *Shop all* link to the top-level page.
- **Space between links** sets the gap between the top-level links.

Build menus with images and promo cards right in the editor with [Dropdown](https://themelab.page/tally/docs/blocks/dropdown.md) blocks, and add single links or buttons with [Link](https://themelab.page/tally/docs/blocks/link.md) blocks.

## Mobile menu

**Switch to the mobile menu below** decides the screen width under which the menu links fold into a menu button and a drawer: 640, 768, 990, 1024, 1280 or 1536 px, or a custom width. Pick a larger width when your menu has many links, so it never wraps onto two lines. The same width is what *Hide on mobile* and *Hide on desktop* mean in every section.

The drawer shows the menu with its sub-levels, the account link, the dark mode switch and the language and country selectors. Its colors come from **Menu and search color scheme**.

## Search

- **Search on desktop:** a *Search bar* in the header, or an *Icon* that opens the search.
- **Search bar width** and **Search results width:** the results panel can be wider than the bar and always stays on screen.
- **Show the / key hint:** a small `/` in the bar, reminding shoppers that the key opens the search from anywhere.
- **Mobile header:** logo position on phones (as on desktop, left or centered) and search as a bar on its own row or as an icon.
- **Backdrop while searching:** dims and/or blurs the page behind the open search, with your choice of darkness and blur.
- **Type popular searches in the placeholder:** the empty field types your popular searches, one after another, as a gentle prompt.

Suggestions, popular searches and the products shown before typing are set in **Theme settings › Search**.

## Account, cart and switches

- **Style:** show the account and cart as words (*Account*, *Cart 2*) or as icons.
- **Show account and log in link:** hide it if you do not use customer accounts. On phones, the account, dark mode and cart icons stay in the header, and a long text logo gets smaller until it fits beside them.
- **Show light and dark mode switch:** the sun and moon button. Turn dark mode on in **Theme settings › Colors**.
- **Show selectors next to the cart:** language and country selectors, shown once the store has more than one language or country.
- **Language:** shown as a name, a code, or hidden, with or without a flag. **Show country and currency** adds the market selector.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Header** (40 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Layout** – With the menu on the left, search opens from the icon. | Logo left, search bar in the middle · Logo centered, menu below · Menu left, logo centered | Logo left, search bar in the middle |

*Logo*

| Setting | Options | Default |
| --- | --- | --- |
| **Logo** – Leave empty to use the logo from Theme settings > Logo and favicon, which also shows on the password page. Without any image the store name shows as a text logo. | Image | – |
| **Logo width on desktop** | 20–300px (step 5) | 120px |
| **Logo width on mobile** | 20–200px (step 5) | 90px |
| **Show store name next to the logo** – The name uses the text logo size and the small text from Theme settings > Logo. | Checkbox | Off |

*Layout*

| Setting | Options | Default |
| --- | --- | --- |
| **Transparent header** – Over a full-width image banner, slideshow or video that opens the page. The header turns solid on hover and when the page scrolls. | Off · Home page, light text · Home page, dark text · Every page, light text · Every page, dark text | Off |
| **Logo on the transparent header** – For example a white version of the logo. Leave empty to keep the regular logo. | Image | – |
| **Sticky header** | None · Always · On scroll up | Always |
| **Vertical padding** | 4–40px (step 2) | 14px |
| **Vertical padding on mobile** | 4–24px (step 2) | 8px |
| **Show bottom line** | Checkbox | On |
| **Color scheme** | Color scheme | Scheme 1 |

*Menu*

| Setting | Options | Default |
| --- | --- | --- |
| **Switch to the mobile menu below** – Under this screen width the header shows the menu button and drawer instead of the menu links. | Small screens (640 px) · Tablets (768 px) · Large tablets (990 px) · Laptops (1024 px) · Desktops (1280 px) · Wide screens (1536 px) · Custom | Large tablets (990 px) |
| **Custom width** | 600–1600px (step 10) | 1100px |
| **Menu** – Nested links open as dropdowns automatically. Links with two levels open the full-width shop panel. | Menu | Main menu |
| **Open every dropdown as the full-width panel** | Checkbox | Off |
| **Images in full-width panels** – Each column shows the image of its collection, product or blog post link. | None · Landscape · Square · Portrait | None |
| **Space between links** – Each link also has its own padding, the area that lights up on hover. | 0–48px (step 2) | 2px |
| **Show product counts next to collection links** | Checkbox | On |
| **Show a shop all link in the panel** | Checkbox | On |
| **Dropdown color scheme** | Color scheme | Scheme 1 |

*Search*

| Setting | Options | Default |
| --- | --- | --- |
| **Search on desktop** | Search bar · Icon | Search bar |
| **Search bar width** | 300–720px (step 20) | 560px |
| **Search results width** – The results panel can be wider than the bar. It stays inside the screen. | 400–1000px (step 20) | 720px |
| **Show the / key hint** | Checkbox | On |
| **Mobile header** – Logo position and search on phones. | Logo as on desktop, search bar below · Logo as on desktop, search icon · Logo left, search bar below · Logo left, search icon · Logo centered, search bar below · Logo centered, search icon | Logo as on desktop, search bar below |
| **Backdrop while searching** | Dim and blur · Dim · Blur · None | Dim and blur |
| **Backdrop darkness** | 0–80% (step 5) | 30% |
| **Backdrop blur** | 0–16px (step 1) | 4px |
| **Type popular searches in the placeholder** – Uses the popular searches from theme settings. | Checkbox | Off |

*Account and cart*

| Setting | Options | Default |
| --- | --- | --- |
| **Style** | Text · Icons | Text |
| **Show account and log in link** | Checkbox | On |

*Country and language*

| Setting | Options | Default |
| --- | --- | --- |
| **Show light and dark mode switch** – Turn dark mode on in Theme settings, Colors. | Checkbox | On |
| **Show selectors next to the cart** – Shown when the store has more than one language or country. Add them in Settings, Markets and Languages. | Checkbox | On |
| **Language** – Shown when the store has more than one language. Add languages in Settings, Languages. | Name (English, Deutsch) · Code (EN, CS) · Hidden | Name (English, Deutsch) |
| **Show country and currency** | Checkbox | Off |
| **Show flags** | Checkbox | On |

*Mobile menu*

| Setting | Options | Default |
| --- | --- | --- |
| **Menu and search color scheme** | Color scheme | Scheme 1 |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |

## Block settings

**Block: link** – no settings, place it where you want it.

**Block: dropdown** – no settings, place it where you want it.

## Related

- [Announcement bar](https://themelab.page/tally/docs/sections/announcement-bar.md): A slim line of news above the header – delivery, returns, a sale – that rotates, scrolls or counts down.
- [Link](https://themelab.page/tally/docs/blocks/link.md): A single link next to the header menu – plain, highlighted or a button, with an icon and a badge.
- [Dropdown](https://themelab.page/tally/docs/blocks/dropdown.md): A dropdown built in the editor from menu items with images, promo cards and a banner – compact or full width.
- [Footer](https://themelab.page/tally/docs/sections/footer.md): A tidy close to every page – logo and text, menus, a signup form, payment icons and the country and language selectors.