Site Header
Main header for your site. Includes options for call to actions, language switcher, and search.
Note: This module is only available in the Website Header global partial.
Content
- By default pulls in portal logo, but can be overriden
- Choose menu and menu alignment (left, center, right)
- Include a utility menu with buttons, language switcher, and/or search and choose whether or not so show it on mobile
- Edit Search strings (labels, screen reader text, result messages, etc)
Styles
Note: Change styling of Website Header in your Theme Settings, under the Website Header section.
- Make sticky
- Change the header and sticky header height
- Change font styling
- Change dropdowns background color
Overview
The Site Header module serves as the primary navigation element for your Framework theme, appearing consistently across all pages of your website. Unlike other modules that you can add or remove from individual pages, this module is permanently configured within the Website Header global partial, ensuring your site maintains a cohesive navigation experience.
When setting up your header, you’ll work primarily through the HubSpot page editor’s module settings panel. The module automatically inherits your portal’s default logo from your HubSpot account settings, but you can easily override this with a custom logo that better fits your brand or specific campaign needs. This flexibility is particularly valuable for SaaS companies running multiple product lines or technology companies with distinct brand divisions.
Menu configuration requires you to first create your navigation menus in HubSpot’s Navigation settings before they’ll appear in the module’s dropdown options. The alignment options (left, center, right) affect how your main navigation items are positioned relative to your logo, with center alignment being popular for minimalist designs and left alignment being standard for traditional layouts.
The utility menu feature is especially powerful for technology companies, as it allows you to combine essential elements like language switching for international audiences, site search functionality, and prominent call-to-action buttons without cluttering your main navigation. When configuring mobile display options, consider that utility menu items can significantly impact mobile user experience—test your configuration across devices to ensure critical actions remain accessible.
Remember that visual styling changes happen through Theme Settings rather than individual module settings, allowing you to maintain consistent header appearance across your entire site while still customizing content and functionality on a per-module basis.