Site Header

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

View a live demo of this module.

Content

• Defaults to logo set in domain settings but can be overriden
• Change alignment of navigation (left, center, right)
• Use a HubSpot navigation menu or create a mega menu
• If creating a mega menu—add columns (make them even or provide specified widths) and in each column add a heading and links, text, or CTAs.
• Include a utility menu and show/hide it on mobile
• Utility menu can include links, CTAs, search, and a language switcher.
• Edit search settings to filter what content it searches through
• Edit strings used throughout the header (search label, skip link, mobile menu toggle, etc)

Styles

Note: Change styling of Site Header in your Theme Settings, under the Website Header section.

• Choose between 3 different header layouts
• Change header height and width
• Edit background color, border color, and buttons color
• Customize menu and child menu fonts
• Edit dropdowns background color, border color, and box shadow color
• Edit search field background color

---

How to Use This Module

The Site Header module serves as the foundation of your website’s navigation experience and appears automatically across every page of your HubSpot site through the Website Header global partial. Unlike other drag-and-drop modules that you add to individual pages, this header module is configured once and provides consistent branding and navigation throughout your entire site.

When customizing your header in the HubSpot page editor, you’ll find that the mega menu feature sets the Spark Premium theme apart from standard navigation options. Mega menus work exceptionally well for service-based businesses with multiple offerings or e-commerce sites with extensive product categories, allowing visitors to see all navigation options at once without multiple clicks.

The utility menu provides an ideal location for secondary actions that support your primary navigation. Consider placing your contact information, social media links, or account login buttons here to keep your main navigation focused on core content areas. The search functionality can be configured to prioritize specific content types - for instance, if you’re running a knowledge base, you can set it to primarily search blog posts and landing pages rather than system pages.

For optimal user experience, test your header configuration across different screen sizes using HubSpot’s responsive preview. The mobile menu behavior is particularly important since the utility menu can be hidden on smaller screens to maintain clean mobile navigation. Remember that changes made to header styling in Theme Settings will automatically apply to all pages, so consider how your color choices will work with various page backgrounds and content types throughout your site.