The transparent header mode allows your header to overlay on top of your page content with a transparent or semi-transparent background, creating a modern and elegant design effect.
Enabling Transparent Header Mode
Method 1: Global Setting via Customizer
Navigate to Appearance > Customize > General.
Locate the Header Type setting and select Transparent from the dropdown menu.
Click Publish to save your changes.
Method 2: Page-Specific Setting
When editing a page or post, scroll down to the DigiFusion Page Settings section in the sidebar.
Find the Header Type option and select Transparent from the dropdown.
Update or publish your page to apply the changes.
How Transparent Headers Work
When transparent mode is activated, the header background becomes transparent, allowing the page content beneath to show through. The header content (logo, navigation) remains fully visible while the background adapts to create the overlay effect.
The transparent header automatically adjusts its styling to ensure proper contrast and readability against different background colors and images.
Page-Specific Overrides
Individual pages and posts can override the global header setting. This allows you to use transparent headers on specific pages like landing pages or portfolios while maintaining the default header style on other pages.
The page-specific setting takes priority over the global Customizer setting when both are configured.
Header Position
Transparent headers automatically position themselves over the page content rather than pushing the content down. This creates a seamless overlay effect where your hero sections or featured images can extend behind the header area.