> 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/volume-themes/faq/navigation-and-header/my-header-is-transparent-over-the-banner-how-do-i-make-it-solid.md).

# My header is transparent over the banner — how do I make it solid?

Why the Volume header sits on top of the first section, and how to give it a solid background on desktop and mobile.

The transparency is not a header setting. It is switched on by the **first section on the page**.

Most banner and slideshow sections in Volume have an **Overlap** setting near the very top of their settings list. When the first section on a template has it enabled, the header is pulled down on top of that section and loses its background. Every other page keeps a normal solid header. That is why the effect follows your home page banner around and disappears on collection and product pages.

{% stepper %}
{% step %}

### Find the section doing it

1. Open **Customize** on the template where the header is transparent.
2. Click the very first section in the list — the banner, slideshow or image at the top.
3. Look for **Overlap** near the top of its settings.
   {% endstep %}

{% step %}

### Turn the overlap off

Set **Overlap** to **Disable**. The header immediately drops back to its own colour scheme and sits above the section instead of on it.

The other three options are **Enable**, **Enable only on desktop** and **Enable only on mobile**. If your header is solid on desktop but still transparent on phones, the section is on **Enable only on mobile**, not on **Disable**.
{% endstep %}

{% step %}

### Or keep the overlap and fix the colors

Scroll the same section down to its **Color** group and set **Overlapped header color scheme**. That scheme is applied to the header only while it is overlapping this section, so you can keep white text and icons over a dark photo without touching the header's own **Color scheme**.
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
**Overlap** is set per section, so if several templates have a transparent header you have to turn it off on each of them. A section that is not first on the page ignores the setting entirely — moving a banner down the page is enough to make the header solid again.
{% endhint %}

### Which sections have Overlap

**Image banner**, **Slideshow**, **Image slideshow**, **Video banner**, **Split banner**, **Banner grid**, **Fullscreen banner with product**, **Collection banner**, **Subcollection banners**, **Scrolling promotion banner**, **Social grid**, **Newsletter** and **Product overview**. If the section at the top of your page is not on this list, the transparency is coming from the header itself — see below.

### A second set of controls in the header itself

The **Header** section has its own background options under the **Color** group, and they work independently of **Overlap**:

* **Hide header background** — makes the header see-through on every page, whatever the first section is doing.
* **Show header background on hover** — brings the background back when the cursor enters the header. This is what makes a see-through header turn solid as you move the mouse into it.
* **Enable background blur** — frosted-glass header instead of a fully solid or fully transparent one, with **Opacity** and **Background blur** to tune it.

**Sticky header** is separate again: **Disabled**, **On scroll to top** or **Always**. A header can be sticky and solid, sticky and transparent, or neither.

{% hint style="success" icon="lightbulb" %}
For everything else in the header, see [Header & Menu Styles](/docs/volume-themes/navigation/header-and-menu-styles.md).
{% endhint %}


---

# 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/volume-themes/faq/navigation-and-header/my-header-is-transparent-over-the-banner-how-do-i-make-it-solid.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.