Transparent Header
Module 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
Usage Guide
The Transparent Header module is essential for creating immersive, full-width hero sections that extend behind your site’s navigation. This module works particularly well on landing pages, service pages, and your homepage where you want to create a bold first impression with large background images or videos.
When you add this module to a page, it modifies how the header behaves for that specific page only. The header background becomes transparent, allowing the content in your first section to show through behind the navigation menu and logo. This creates a seamless, modern look that’s especially effective for SaaS product announcements or technology showcases.
Best practices for using the Transparent Header module:
You’ll get the most impact when your first page section uses a dark background image or color, as this provides strong contrast against the header text and navigation links. The Vertical theme’s header elements are optimized to remain readable over various background types, but darker backgrounds typically work best.
Position this module at the very top of your page in the HubSpot page editor for it to take effect properly. Since it doesn’t display visible content, you might not see an immediate change until you preview or publish your page. The transparent effect only applies when there’s actual content in the section below to show through.
This module pairs exceptionally well with the Vertical theme’s hero banner sections, video backgrounds, or any full-width content modules. Avoid using it on pages with light or white backgrounds in the first section, as your header navigation may become difficult to read.
Remember that the transparency effect will impact your entire header area, including your main navigation menu, so ensure your page design maintains good usability and accessibility standards.