> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/features-and-advanced-setup/transparent-header.md).

# Transparent header

Set up transparent navigation and control the sidebar hover background.

Use transparent navigation to let the header or sidebar sit on top of the first section.

This works best with hero-style layouts and full-width media banners.

### Basic setup

Transparent navigation requires three settings to line up.

{% stepper %}
{% step %}

#### Enable the global setting

1. Go to **Theme Editor → Theme settings → Appearance**
2. Scroll down to **Transparent header and sidebars**
3. Enable **Allow transparent navigation**
4. Enable **Enable on mobile** if you want the effect on small screens
   {% endstep %}

{% step %}

#### Set the first section to overlap

1. Make sure the first section on the page is one of these:
   * **Slideshow with media**
   * **Image banner**
   * **Video banner**
   * **Banner with product**
2. Open that section's settings
3. Set **Section width → Overlap by navigation**
   {% endstep %}

{% step %}

#### Keep the navigation on the Base color scheme

Open **Header** (or **Main sidebar**, if you use sidebar navigation) → **Colors** → and set **Color scheme** to **Base**.
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
**Base is the only color scheme that stays transparent.** Both **Swap** and **Set** paint a solid background on the navigation, so the overlap is there but you can't see through it. If your header looks opaque over a banner that is correctly set to **Overlap by navigation**, this is almost always the reason.
{% endhint %}

{% hint style="info" %}
All three settings have to be active at the same time, and the overlapping section has to be the **first** one in the template. A banner set to **Overlap by navigation** further down the page is rendered normally.
{% endhint %}

***

### Sidebar navigation hover background

If you use **Sidebar-based navigation**, the sidebar is designed to be transparent over the first section — and turn white when **hovered**.

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FTRr3d3CMO6CMDTgQbb1a%2FScreenshot%202026-06-11%20at%2016.03.31.png?alt=media&#x26;token=f3034708-cf0f-479f-91c6-8a0c2e2b4452" alt=""><figcaption></figcaption></figure>

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FkqOwwgeQu8vfYrpiXdpp%2FScreenshot%202026-06-11%20at%2016.03.47.png?alt=media&#x26;token=bc417efe-892b-4ba4-9e0c-741fc764ca0a" alt=""><figcaption></figcaption></figure>

If this animation is not working, check two things.

#### 1. Set the menu style to Overlap slide out

Open **Theme Editor → Main sidebar → Main menu block** → set **Menu style** to **Overlap slide out**.

{% hint style="info" %}
This style is required for the hover background transition.
{% endhint %}

#### 2. Make sure the menu has nested child links

Go to **Shopify Admin → Content → Menus** → open your menu and make sure at least one item has child links nested underneath it.

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FkH8BvLU45CkkxctCIoOD%2FScreenshot%202026-06-11%20at%2014.44.02.png?alt=media&#x26;token=06d93948-04dd-4c0b-a780-29e10a4c9903" alt=""><figcaption></figcaption></figure>

{% hint style="warning" icon="question" %}
If you need help building nested links, see **How do I create nested / dropdown menus?**.
{% endhint %}

{% hint style="success" icon="lightbulb" %}

#### No nested items in your menu?

Add a **Nested menu** block in **Main sidebar** as a workaround.

Go to **Main sidebar → Add block → Nested menu**.

In **Dropdown link**, enter the exact name of any existing menu item.

This activates the hover animation without changing your actual menu structure.
{% endhint %}

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FbxFTz9fHtmxLV3S9DKWE%2FScreenshot%202026-06-11%20at%2016.09.38.png?alt=media&#x26;token=d7b0e2e5-eac1-4f48-82ab-068a28113953" alt=""><figcaption></figcaption></figure>

***

### Changing the sidebar hover background color

By default, the sidebar hover background uses the color from **Theme settings → Colors → Layout → Background**.

{% hint style="warning" %}
**Main sidebar → Colors → Color scheme** has to be **Base**.

With **Swap** or **Set**, the sidebar carries its own background all the time, so there is nothing to fade in on hover.
{% endhint %}

To change the background color across the entire site, go to **Theme Editor → Theme settings → Colors → Layout** and update **Background**.

{% hint style="warning" %}
This affects all sections and blocks across your store.
{% endhint %}

***

### Change the sidebar hover color only

Add this in **Main sidebar → Custom CSS**:

{% code title="Main sidebar → Custom CSS" %}

```css
.main-sidebar:hover {
  background-color: #00ffee;
}
```

{% endcode %}

Replace `#00ffee` with your own color value.

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FJh99pxOozZKZyB9dmT6Z%2FScreenshot%202026-06-11%20at%2015.33.46.png?alt=media&#x26;token=5d2e3169-0468-474d-916f-ec9697dac187" alt=""><figcaption></figcaption></figure>


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://staylime.com/docs/avante-themes/features-and-advanced-setup/transparent-header.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.