> For the complete documentation index, see [llms.txt](https://sitesbyseth.gitbook.io/sitesbyseth-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sitesbyseth.gitbook.io/sitesbyseth-docs/reign/free-gift-tiers/transparent-header.md).

# Transparent Header

That premium look where the navigation floats over a full-bleed hero, then becomes a solid header as you scroll — Reign does this on the home page with three settings working together. Here's the full recipe, plus fixes for the usual problems.

## How it works

On the **home page only**, when enabled, the header is transparent while you're near the top of the page. As soon as you scroll, it switches to your normal header (with your sticky-header behavior). Three pieces:

1. **The header setting** — Header section → Transparent header → **Enable on home page** (on by default)
2. **The hero setting** — in your first section (**Image banner** or **Slideshow**), turn on **Optimize for transparent header** (Image banner) — it sizes the hero to fill the viewport and keeps your text clear of the navigation
3. **The inverse logo** — **Theme settings → Logo → Inverse logo (transparent header)** — a white/light version of your logo shown while the header is transparent, so it doesn't vanish over dark imagery

## Setup, step by step

1. **Online Store → Themes → Customize**, Home page template
2. Click **Header** → confirm **Enable on home page** is checked
3. Click your first section (Slideshow or Image banner):
   * Image banner: enable **Optimize for transparent header**, set **Height: Large**
   * Slideshow: use **Height: Large** with strong imagery and an overlay of 20–40% so nav icons stay legible
4. Open **Theme settings → Logo** and upload the **Inverse logo**
5. Save and preview: at the top, the nav floats over the hero with your light logo; scroll down, it becomes the solid header with your normal logo

## The drop-mode version

The password page has its own take: **Password header → Transparent header over first section**. When the first section is a hero with real imagery or video, the bar sits over it and goes solid after scroll. It adds one extra control — **Bar text and icons (over media)** (default #FFFFFF) — for icon/text color while transparent. See [Drop mode](/sitesbyseth-docs/reign/getting-started/drop-mode.md).

## Troubleshooting

* **Logo invisible over the hero** → you skipped the inverse logo, or your hero is too light for a white logo — raise the slide's overlay opacity
* **Header isn't transparent** → it only applies on the **home page**, at the **top of the page**; also check the Header section toggle
* **Text hidden behind the nav** → turn on **Optimize for transparent header** on the banner, or move the slide's content position toward *bottom-left / middle-center*
* **Weird gap above the hero** → make sure the hero is the *first* section on the template, directly under the header group

💡 **Pro tip:** The combo that sells the look: full-height video slide (autoplay, muted, loop), 30% overlay, content bottom-left, transparent header with inverse logo, sticky **On scroll up**. Instant campaign-site energy.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://sitesbyseth.gitbook.io/sitesbyseth-docs/reign/free-gift-tiers/transparent-header.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.