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.

1

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.

2

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.

3

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.

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.

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.

For everything else in the header, see Header & Menu Styles.