Site Header
Main header for your site. Includes options for calls to action, language switcher, and search.
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
- Select different button styles on mobile and desktop
- 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
- Change search field colors
How to Use This Module
The Site Header module serves as the foundation of your website’s navigation experience and establishes your brand presence across every page. Since this module only functions within the Website Header global partial, any changes you make will automatically appear site-wide, ensuring consistent branding and navigation throughout your HubSpot website.
Setting Up Your Header Navigation
When configuring your navigation menu, choose a HubSpot menu that reflects your site’s primary user journey. For B2B and professional services sites using Brightlane, focus on creating clear pathways to your main service pages, about section, and contact information. The utility menu complements your main navigation by housing secondary actions like search functionality and language options that support user experience without cluttering your primary navigation.
Optimizing for Mobile and Desktop
Take advantage of the different button styling options for mobile and desktop views. On desktop, you might use a prominent primary button for your main call-to-action, while switching to a more compact button style on mobile to preserve screen real estate. This flexibility helps maintain conversion focus across all device types.
Customizing Search Functionality
The built-in search feature includes editable strings that you can customize to match your brand voice. Consider updating the search prompt text to guide users toward finding specific content types relevant to your business, such as “Search case studies, services…” rather than generic placeholder text.
Remember that header styling changes happen through Theme Settings rather than individual module settings, allowing you to maintain design consistency while making site-wide adjustments efficiently through HubSpot’s design manager.