Site Header

Note: This module is only available in the Website Header global partial.

Content

• Logo pulls domain’s default logo, but can be overridden
• Select a HubSpot navigation menu
• Include a utility menu with search, language switcher, and/or buttons
• Edit strings used within search (results message,  search prompt, search toggle, etc)

Styles

Note: Edit the following styles in the Theme Settings under the Website Header section.

• Make header sticky
• Customize menu link and child menu link styling

---

About This Module

The Site Header module serves as your website’s primary navigation hub and is automatically included as part of the Vertical theme’s global header system. Unlike other drag-and-drop modules in HubSpot, you cannot add or remove this module from individual pages—it appears consistently across your entire site to maintain navigation consistency.

When configuring your site header, you’ll work primarily through the Theme Settings panel rather than the standard module editor. This centralized approach ensures your header styling remains uniform across all pages while giving you granular control over functionality. The module is specifically designed for SaaS and technology companies that need professional navigation with advanced features like multi-language support.

Best practices for setup: Start by configuring your primary navigation menu in HubSpot’s Website > Menus section before customizing the header module. This ensures your navigation structure is properly established. For the utility menu, consider your audience’s needs—enable the language switcher only if you’re serving international markets, and include search functionality for content-heavy sites with blogs or resource libraries.

The sticky header option works particularly well for longer pages common in SaaS websites, such as feature comparison pages or detailed product tours. When enabled, your navigation and call-to-action buttons remain accessible as visitors scroll through extensive content.

Logo considerations: While the module automatically pulls your domain’s default logo, you can override this setting if you need a different version specifically for the header. This is useful when your standard logo doesn’t scale well at smaller header sizes or needs different contrast for the header’s background color.

Remember that changes made to the Site Header affect every page on your site immediately, so test thoroughly in preview mode before publishing updates.