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

# Transparent Header

For pages that open with a full-width hero image or video, the mobile header can sit directly on top of that first section with no background color, so the visual fills the screen while the navigation stays visible.

![Mobile transparent header — standard state vs transparent overlay over hero](/files/K5u4YzNohzlR5xJRHjzI)

***

## How It Works

When the first section on a page has its **transparent header** option turned on, the mobile header overlays that section. Its background becomes transparent and the theme switches to the **Transparent color scheme** set in the Mobile Header settings.

Once the customer scrolls past the hero section — or the sticky header kicks in — the header switches back to its standard color scheme.

If no section on the page turns the option on, the mobile header always uses its standard color scheme.

***

## How to Enable It for a Section

Transparent mode is turned on per section, not per device — it applies to both the desktop and mobile headers:

1. Open the page in the theme editor.
2. Select the **first section** (Banner, Slideshow, or another full-width section).
3. Turn on the **Transparent header** toggle in that section's settings.
4. Save.

![Transparent header toggle in a section's settings](/files/bO9GzTfYwwWWEdLSod2B)

{% hint style="info" %}
Only the **first section** on the page can trigger transparent mode. If a section is second or lower on the page, the toggle has no effect.
{% endhint %}

***

## Transparent Color Scheme

Set in **Mobile Header → Transparent header → Transparent**. This is the color scheme the mobile header uses while overlaying the hero section. Choose a text and icon color that stays readable over your hero imagery — white is the usual choice over dark images.

![Mobile transparent color scheme — white icons vs dark icons over hero](/files/Olial8iK0Pahh3kuICMX)

This scheme is separate from the desktop header's transparent color scheme — changing one doesn't affect the other.

{% hint style="warning" %}
Test the transparent header on a real phone or in browser DevTools at a narrow width. Hero images often crop differently on mobile, which can place light or dark areas behind the header icons and make them harder to read.
{% endhint %}

***

## Transparent Logo

In transparent mode the theme automatically swaps to the **Transparent Logo** uploaded in [Logo and Favicon](/helix/theme-settings/logo-and-favicon.md), so you can use a light logo over dark hero images without switching versions by hand.

If no transparent logo is uploaded, the primary logo is used.

See [Logo and Favicon](/helix/theme-settings/logo-and-favicon.md) for upload details.