The Transparent Header lets the content at the top of the page extend underneath the header instead of beginning below it. This is particularly useful for hero sections with background images, videos or strong visual designs where you want the header to blend directly into the page.
To configure it, open Customiser → Header → Headers, select the header you want to edit, and enable its Transparency functionality.
Quick Look
Blocksy Companion required
The Transparent Header functionality requires the Blocksy Companion plugin to be installed and activated.
Getting Started
Once transparency is enabled, the header is overlaid on top of the content below it rather than occupying its own separate area. The underlying hero section therefore becomes visible behind the header.
This works especially well with Blocksy’s full-width Page Title layouts and other large hero sections that provide enough visual space behind the header.
Granular Controls
Display Conditions
The Transparent Header does not need to be active everywhere. Use its Display Conditions to choose exactly where the transparent state should be enabled.
Conditions can include or exclude specific areas such as:
- Pages and posts.
- Post types and archives.
- WooCommerce products and shop areas.
- Categories, tags and other taxonomies.
- User roles and login states.
- Other supported conditions provided by Blocksy’s Conditional Module.
For a complete overview of the available targeting options, see the Conditional Module documentation.
Transparent State Design
Supported header rows and elements can provide separate design values for the transparent state. This lets you adapt the header specifically for the background that appears underneath it.
For example, the Logo element can use a dedicated image while the transparent state is active, making it possible to switch between light and dark logo variants automatically.
Other supported elements can also expose transparent-state Color and design controls, allowing navigation, icons and other header content to remain clearly visible against the hero background.
Keep enough contrast
Because the header sits directly over the page content, make sure its logo, navigation and other elements remain easy to read against the underlying background. Transparent Headers generally work best above a large hero section with predictable imagery or Color.