About the Transparent header

Sections that support the transparent header

In this version of Maison, the following sections include the Allow transparent header setting:

• Slideshow
• Image banner
• Video banner
• Video with text
• Image with text
• Featured product
• Email signup
• Rich text
• FAQ
• Custom section
• Main page banner
• Main collection banner
• Main blog banner
• Main policy banner
• Main product
• Main cart

Only the first section on the page can activate the transparent header.

Transparent header settings

Maison uses the following section-level settings where supported.

Allow transparent header

Enables the transparent-header behavior for the page.

This setting only takes effect when the section is the first section in the page template.

Apply transparent text color

Applies the color configured under:

Header > Transparent header > Transparent header text

When enabled, Maison can also switch from the regular logo to the White logo.

Use solid header on mobile

Disables the transparent-header overlay on smaller screens while keeping the transparent layout on larger screens.

This setting is only displayed in sections that support the mobile solid-header option.

Logo behavior

Maison supports separate logo assets for normal and transparent header states.

The Theme settings include:

Logo
White logo
Mobile logo
Mobile white logo

The White logo appears when the transparent color mode is active.

If a Mobile white logo is not uploaded, Maison falls back to the desktop White logo on mobile.

When the transparent header returns to its normal solid state, the regular Logo or Mobile logo is displayed again.

Sticky header behavior

The transparent header controls the header's initial appearance at the top of the page.

If a sticky-header mode is enabled, Maison can switch the header back to its normal solid appearance after the header becomes sticky while scrolling.

The transparent background and transparent text/logo state are therefore primarily used while the header is positioned over the first section.

The exact scrolling behavior also depends on the selected Sticky header mode.

Transparent header behavior

• A compatible section must be the first section of the page.
• Allow transparent header must be enabled in that section.
• Maison places the header over the first section.
• The header background becomes transparent in its initial state.
• Apply transparent text color changes the header content to the configured Transparent header text color.
• When transparent text color is enabled, Maison uses the White logo where available.
• Use solid header on mobile disables the overlay behavior on smaller screens.
• Transparent-header settings are stored separately in each section and template.
• Moving a transparent-compatible section away from the first position prevents it from activating the transparent header.
• The transparent header can return to the normal header appearance when sticky behavior becomes active during scrolling.

Recommended setup

For a typical hero banner with a dark background image:

Theme settings > Logo
White logo: Upload a light or white logo

Header
Transparent header text: White

First section
Allow transparent header: On
Apply transparent text color: On
Use solid header on mobile: Optional

For a light hero image where the regular dark header content already has enough contrast:

First section
Allow transparent header: On
Apply transparent text color: Off

This keeps the header transparent while retaining the normal header text and logo colors.

Design recommendations

For the best result:

• Use a first section with enough height to clearly show the overlay effect.
• Make sure the header text contrasts with the background.
• Avoid placing important image details directly behind the navigation.
• Upload a White logo if your normal logo becomes difficult to see over dark backgrounds.
• Test every slideshow slide because the background behind the header may change.
• Check both desktop and mobile layouts.
• Use Use solid header on mobile when the mobile banner does not provide sufficient contrast.
• Test the sticky-header behavior after configuring the transparent state.

Troubleshooting

If the header does not become transparent, make sure Allow transparent header is enabled in the first section.

If the setting is enabled but the header remains solid, confirm that the section is actually the first section in the page template.

If the header text is difficult to see, enable Apply transparent text color and configure a suitable Transparent header text color in the Header settings.

If the normal logo is difficult to see over the first section, upload a White logo and enable Apply transparent text color.

If the White logo does not appear on mobile, upload a Mobile white logo. If none is provided, Maison falls back to the desktop White logo.

If the header is transparent on desktop but solid on mobile, check whether Use solid header on mobile is enabled.

If a transparent header works on one page but not another, check the first section and its settings on the affected page template.

If a transparent header works on one collection or product template but not another, configure the setting separately on the other template.

If the header becomes solid after scrolling, this can be expected when sticky-header behavior becomes active.

If the transparent header overlaps important text or imagery, adjust the first section's content position or use a solid header instead.

Need Further Assistance

If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.