Transparent Header
Add to the page to make the header transparent and overlap the first section of the page.
Note: This is a built-in module, meaning you’ll need to open the Contents tab of the page editor sidebar to select it.
Content
- Make header transparent (removes background from header and make s it overlap the first section of the page)
- Module itself doesn’t render any visible content on the page
How to Use This Module
The Transparent Header module is designed to create a seamless visual connection between your site’s navigation and hero content. This invisible module works behind the scenes to remove the header’s background color and position it over your page’s first section, creating a modern overlay effect that’s particularly effective for nonprofit landing pages and educational campaign sites.
You’ll find this module most useful on pages where your first section contains a hero image, video background, or gradient that you want to extend all the way to the top of the browser window. The transparent effect works especially well with the Impact theme’s bold typography, as your navigation links will appear directly over your hero content for maximum visual impact.
To add the Transparent Header module, open the Contents tab in your page editor sidebar and drag it anywhere onto your page – its position doesn’t matter since it won’t display visible content. Once added, the module automatically applies the transparency effect to your entire page header.
Best practices for this module:
- Ensure your first section has sufficient contrast with your navigation text color for readability
- Test the transparency effect across different devices, as mobile headers may behave differently
- Consider using this module on donation landing pages, event pages, or program showcase pages where visual impact is crucial
- Avoid using it on text-heavy pages where the header overlay might interfere with content readability
Keep in mind that this module affects the entire page header, so you can’t selectively apply transparency to certain navigation elements. The effect remains active until you remove the module from your page through the Contents tab.