Site Header

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

Content

• 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.

• Change header height
• Edit background color, border color, and buttons color
• Customize menu and child menu fonts
• Edit dropdown background color, border color, and box shadow color
• Edit the search field background color

---

---

About This Module

The Site Header module serves as the primary navigation foundation for your HubSpot website, appearing at the top of every page where the Website Header global partial is used. Unlike other modules that you add individually to pages, this header module is configured once in your theme’s global partial and automatically appears site-wide, ensuring consistent navigation across your entire website.

When setting up your Site Header, you’ll work primarily through the page editor’s module settings rather than dragging and dropping the module itself. This centralized approach means any changes you make to your header configuration will instantly reflect across all pages using the Website Header partial, making it efficient to maintain a cohesive site experience.

The mega menu functionality is particularly powerful for complex websites with multiple service offerings or product categories. You can create multi-column layouts that showcase your full site hierarchy without overwhelming visitors with endless dropdown lists. This works especially well for business websites, service providers, and e-commerce sites where you need to display extensive navigation options in an organized, scannable format.

Pro tip: Before launching your site, test your header navigation on both desktop and mobile devices using HubSpot’s preview functionality. Pay special attention to how your mega menu collapses on smaller screens and ensure your utility menu items remain accessible. The mobile menu toggle and search functionality should feel intuitive to users navigating on smartphones and tablets.

Remember to leverage the Theme Settings customization options to match your header styling with your brand guidelines. The header often serves as visitors’ first impression of your site, so investing time in proper setup and styling will pay dividends in user experience and professional appearance.