> 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

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 two settings to be active at the same time.

{% 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

<figure><img src="/files/N00lH47P7skKZjsDKX55" alt=""><figcaption></figcaption></figure>
{% 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**
2. Open that section's settings
3. Set **Section width → Overlap by navigation**

<figure><img src="/files/s850FbpDncCy5Oi8Hvac" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
Both settings must be active at the same time.
{% 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="/files/fc1gCGtV1upzuRLsPGxZ" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/KJpbzanm9ymbOQK0yeyx" 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**

<figure><img src="/files/IMM6AqtKDVkAdFCTEn52" alt=""><figcaption></figcaption></figure>

{% 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="/files/kbTqKOlgTgDCaLTLbtsa" alt=""><figcaption></figcaption></figure>

{% hint style="warning" icon="question" %}
If you need help building nested links, see [**How do I create nested / dropdown menus?**](/docs/avante-themes/faq/navigation/how-do-i-create-nested-dropdown-menus.md).
{% 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="/files/agZBRLLnRAskknIAHNup" 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" %}
Make sure **Main sidebar → Colors → Color scheme** is **not** set to **Set**.

If it is set to **Set**, the background stays visible all the time.
{% endhint %}

<figure><img src="/files/J9lU6Ve46K7di9WfycXY" alt=""><figcaption></figcaption></figure>

To change the background color across the entire site:

Go to **Theme Editor → Theme settings → Colors → Layout** and update **Background**.

<figure><img src="/files/1RReM03kvtu7xDiBX6aa" alt=""><figcaption></figcaption></figure>

{% 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="/files/lZVqgyJkifrE6HAoNRCm" 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 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://staylime.com/docs/avante-themes/features-and-advanced-setup/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.