Skip to main content

Mauris purus urna, dictum non cursus et, congue et felis. Suspendisse porttitor mi et eros luctus suscipit.

Read More
Open Search
Schedule a Call
Search for topics or resources
Enter your search below and hit enter or click the search icon.
Close Search
TRUST Documentation

Header

Your site header is the area at the very top of your website where your logo and main navigation are displayed. Below is a breakdown of the options available along with some information that explains how certain controls are only visible when other controls are engaged or selected.

header--documentation

Hello Bar

Enable Hello Bar: Boolean (check to enable)

These controls will only be visible if Enable Hello Bar is equal to true.

Hello Bar Group
  • Device Visibility: Single Choice: Show at all screen sizes, Hide on Desktop, Hide on Desktop and Tablet, Hide on Tablet and Mobile, Hide on Mobile
  • Exclude Hello Bar on Website Pages: Boolean (check to enable)
  • Exclude Hello Bar on Landing Pages: Boolean (check to enable)
  • Exclude Hello Bar on Blog: Boolean (check to enable)
  • Hide Hello Bar for Members of Specific Contact Lists: Boolean (check to enable)
  • When Hide Hello Bar for Members of Specific Contact Lists is enabled then the following will appear as an option.
    • Repeatable Group: Excluded List IDs
      • Excluded List IDs: Text Input - Enter the ID of any number of contact lists. Members of at least one of these lists will not see the Hello Bar.
  • Cookie: Name/ID: Input Text - Enter a unique alphanumeric combination of letters for use in the cookie name. This text should contain only letters, numbers, hyphens, and underscores. No spaces or other special characters should be used. Changing the cookie name will cause any users with the old cookie(s) to immediately be able to see the popup again. This means the cookie name should only be changed when the Hello Bar's purpose is. The cookie is specific to the domain.
  • Cookie: Lifetime (Days) When Closed: Number Input
  • Cookie: Lifetime (Days) When Clicked: Number Input - This cookie is only set if the CTA within the Hello Bar content is clicked.
  • Text Content: Text Input
  • CTA: Type: Single Choice: HubSpot Call-to-Action, Custom Link
  • Based on your selection for CTA: Type, the following inputs will show.
    1. Option: HubSpot Call-To-Action
      • CTA: Select HubSpot CTA from the CTA Section of your portal
    2. Option: Custom Link
      • CTA: Button Text: Text Input
      • CTA: Hyperlink URL
        • Link to: External, Content, File, Email Address, Blog
        • URL: Input URL or Select Page

Top Bar

Top Bar Group
  • Top Navigation Repeatable Group
    • Menu Item Icon: Icon
    • Menu Item Label: Text Input
    • Hyperlink
      • Link to: External, Content, File, Email Address, Blog
      • URL: Input URL or Select Page
    • Open Hyperlink in New Tab: Boolean (check to enable)

Main Navigation

Main Navigation Type: Single Choice: HubSpot Advanced Menu, Custom Menu/Mega Menu

Based on your selection for Main Navigation Type, the following inputs will show.

  1. Option: HubSpot Advance Menu
    • HubSpot Menu: Menu
  2. Option: Custom Menu/Mega Menu
    • Main Navigation Repeatable Group
      • Menu Item Label: Text Input
      • Add a Hyperlink to this Menu Link: Boolean (check to enable)
      • When Add a Hyperlink to this Menu Link is enabled then the following will appear as an option.
        • Mobile Menu Label: Text Input - If this link has a child menu nested within it, in the mobile menu a separate menu link is needed to allow users to reach the URL since the click functionality is overridden. You may add label text here which will be used for that link or leave this blank to use the same label as on desktop.
        • Hyperlink
          • Link to: External, Content, File, Email Address, Blog
          • URL: Input URL or Select Page
        • Open Hyperlink in New Tab: Boolean (check to enable)
      • Child Menu Type: Single Choice: No Children, Nested Menu, Mega Menu
      • Based on your selection for Child Menu Type, the following inputs will show.
        1. Option: No Children
        2. Option: Nested Menu
          • Nested Menu: Simple Menu
        3. Option: Mega Menu
          • Mega Menu: Dropdown Width: Single Choice: Width of Site Grid, Width of Browser, Slightly Narrower Than Site Grid
          • Mega Menu: Groups Repeatable Group
          • You may add up to 5 groups of megamenu links.
            • Mega Menu: Group Width: Single Choice: 20%, 25%, 33%, 50%, 60%, 75%, 100% - Ensure the total group width of columns in your mega menu add up to exactly 100%, otherwise there may be extra white space or your columns may not fit in the available space.
            • Mega Menu: Group Background Color: Single Choice: None, Primary, Secondary, White, Dark Grey
            • Override Text To White: Boolean (check to enable)
            • Mega Menu: Number of Columns: Single Choice: 1 - 5
            • Mega Menu: Link Blocks Repeatable Group
              • Mega Menu Parent Label: Text Input
              • Add a Hyperlink to Mega Menu Parent Label: Boolean (check to enable)
              • When Add a Hyperlink to this Mega Menu Parent Label is enabled then the following will appear as an option.
                • Mobile Menu Parent Label: Text Input - In the mobile menu a separate menu link is needed to allow users to reach the URL since the click functionality is overridden. You may add label text here which will be used for that link or leave this blank to use the same label as on desktop.
                • Mega Menu Parent Hyperlink
                  • Link to: External, Content, File, Email Address, Blog
                  • URL: Input URL or Select Page
                • Open Mega Menu Parent Hyperlink in New Tab: Boolean (check to enable)
              • Mega Menu Group: Links: Simple Menu
            • Mega Menu: CTA Group
              • Show Mega Menu CTA: Boolean (check to enable)
              • When Show Mega Menu CTA is enabled then the following will appear as an option.
                • Mega Menu CTA: Label Text: Text Input
                • Mega Menu CTAs Repeatable Group
                  • Mega Menu CTA: Button Text: Text Input
                  • Mega Menu CTA: Hyperlink URL
                    • Link to: External, Content, File, Email Address, Blog
                    • URL: Input URL or Select Page
                  • Mega Menu CTA: Open Hyperlink in New Tab: Boolean (check to enable)
                  • Show Mega Menu CTA in Mobile Navigation: Boolean (check to enable)
                  • Button Color: Single Choice: Primary, Secondary, White, Simple

Search

Show Search: Boolean (check to enable)

These controls will only be visible if Show Search is equal to true.

  • Search Type: Single Choice: HubSpot Search (Default), Site Search 360
  • Based on your selection for Search Type, the following inputs will show.
    1. Option: HubSpot Search (Default)
      • Search: Placeholder Text: Text Input
      • Search: Lightbox Header: Text Input
      • Search: Lightbox Helper Text: Text Input
      • Search: URL of HubSpot Search Results Page: Text Input
    2. Option: Site Search 360 - You will need to sign up for a Site Search 360 account to be able to use this feature.
      • Site Search 360: Code Snippet: Text Input - Use this field to add the Site Search 360 code snippet to your site. You can find this code snippet in your Site Search 360 account by following steps 1 and 3: https://docs.sitesearch360.com/installation-guide. Step 2 has already been implemented.
      • Site Search 360: Results Type: Single Choice: Overlay (Popup with Results on Current Page), Embed (Redirect to Search Page with Results)
      • Based on your selection for Site Search 360: Results Type, the following inputs will show.
        1. Option: Overlay (Popup with Results on Current Page)
        2. Option: Embed (Redirect to Search Page with Results)
          • Search: Placeholder Text: Text Input
          • Search: Lightbox Header: Text Input
          • Search: Lightbox Helper Text: Text Input
      • Click here to finish the setup of Site Search 360.

Main Nav Call to Action

Show CTA: Boolean (check to enable)

These controls will only be visible if Show CTA is equal to true.

  • CTA: Button Text: Text
  • CTA: Hyperlink URL
    • Link to: External, Content, File, Email Address, Blog
    • URL: Input URL or Select Page
  • CTA: Open Hyperlink in New Tab: Boolean (check to enable)

FAQs

Where do I change the theme header's style(s)?

Can I use a HubSpot Advanced Menu?

My search isn't working. What's wrong?

Page Speed Impact

Low - This module is your global site header. Due to this fact, great care has been taken to ensure it's flexible but, also optimized for performance.

Development Notes

Reserved block class:

header

Resources:

module js inside main module

globals/Header/css/Header.css

Header CSS Partials

globals/Header/css/_partials/_header-cta.css

globals/Header/css/_partials/_header-hello.css

globals/Header/css/_partials/_header-languageswitcher.css

globals/Header/css/_partials/_header-logo.css

globals/Header/css/_partials/_header-main.css

globals/Header/css/_partials/_header-megamenu.css

globals/Header/css/_partials/_header-mobile.css

globals/Header/css/_partials/_header-nestedmenu.css

globals/Header/css/_partials/_header-search.css

globals/Header/css/_partials/_header-top.css

globals/Header/css/_partials/_header-wrapper.css