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

# Transparent Header

For pages that open with a full-width hero image or video, the 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.

![Transparent header — default vs transparent overlay over hero image](/files/k9fHswwa84nWN0Wku8oj)

***

## How It Works

When the first section on a page has its **transparent header** option turned on, the header overlays that section. Its background becomes transparent and the theme switches to the **Transparent color scheme** set in the 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 header always uses its standard color scheme.

***

## How to Enable It for a Section

Transparent mode is turned on per section, not globally:

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/agPNZjYqpZZGArHzQhAN)

{% 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 **Header → Transparent header → Transparent**. This is the color scheme the header uses while overlaying the hero section. Choose a text and icon color that stays readable over your hero imagery — white text is the usual choice over dark images.

![Transparent color scheme — white text vs dark text over hero image](/files/sULvncZzTDhOzVXkbcpu)

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

{% hint style="warning" %}
If your hero images vary a lot from page to page (some dark, some light), pick a transparent color scheme that reads well across all of them.
{% 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 main logo is used everywhere.

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