Transparent Header
Make the main 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 in the page editor sidebar to select it.
Content
- Make header transparent (removes background from header and makes 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 designed to create a modern, immersive design effect where your site’s navigation seamlessly overlays the hero content of your page. This module works particularly well on landing pages, product showcase pages, and homepage templates where you want to maximize visual impact and create a sleek, professional appearance.
When you add this module to a page in the HubSpot page editor, it modifies how the main navigation header behaves rather than adding visible content itself. You’ll want to place this module at the very top of your page, before any hero sections or banner content that you want the header to overlay.
Best practices for using the Transparent Header module:
- Choose contrasting content: Ensure your hero section has sufficient contrast with your navigation text and logo. If your header text is dark, use a light background image or section color beneath it.
- Test mobile responsiveness: Always preview your page on mobile devices using the page editor’s device preview options, as transparent headers can behave differently on smaller screens.
- Consider page hierarchy: This module works best on top-level pages like your homepage or main service pages rather than blog posts or detail pages where traditional header styling may be more appropriate.
The module integrates seamlessly with the Traverse theme’s existing header configuration, so your logo, navigation menu items, and any header CTAs will maintain their styling while gaining the transparent overlay effect. You can still customize header colors and typography through the theme settings panel, but remember that these changes will apply globally across your site where the transparent header isn’t active.