Site Header

Content

• By default, the module pulls in the logo set in portal settings, but can be overridden
• Include a logo for transparent heading
• Change menu alignment (left, right, split)
• If using the split menu, alignment a contact link (email or phone) can be added the left of the menu
• Select HubSpot navigation menu to use (if using the split menu select two menus, one for the left side and one for the right side)
• Include a utility menu with language switcher, search, and/or buttons
• If using search, edit all the hard-coded strings (accessible labels, submit button text, prompt, results message, etc)

Styles

Note: All styles for this module are edited in the Theme Settings Website Header section instead of in the module.

• Choose a pre-defined header layout: Header A (left-aligned menu with search and call to action button) or Header B (split-menu with contact link, search, and call to action button)
• Make the header stick to the top of the page on scroll
• Change font family, size, weight, color, hover color line-height, and letter spacing of main menu links and child menu links
• Change color and hover color of main menu links and child menu links for a transparent header

---

---

How to Use This Module

The Site Header module serves as the primary navigation hub for your Traverse theme website and should be placed at the top of every page template. This module automatically appears in your page editor’s available modules when you’re building pages, and it’s designed to maintain consistency across your entire site while offering extensive customization options.

When dragging this module into your page templates, you’ll notice that most visual customizations happen through Theme Settings rather than individual module settings. This centralized approach ensures your header maintains a consistent appearance across all pages while making site-wide updates quick and efficient. Navigate to Design Manager > Edit Theme Settings > Website Header to access the comprehensive styling controls.

The transparent header option is particularly valuable for landing pages and homepage designs where you want your hero content to extend full-width behind the navigation. When enabled, you can configure separate color schemes that automatically adapt based on the background content beneath the header.

For multilingual sites, the language switcher integration connects directly with HubSpot’s multi-language tools, automatically displaying available language versions of your content. The search functionality indexes your HubSpot pages and blog posts, providing visitors with instant access to your site content.

Best practices: Use Header A layout for simpler site structures with fewer navigation items, while Header B works well for complex sites requiring multiple menu sections or prominent contact information. The sticky header option improves user experience on content-heavy pages by keeping navigation accessible during scrolling. Remember that split menus require you to create two separate navigation menus in your HubSpot portal settings – one for each side of the header.