→ Start Here
The most-used global header toggles: top hat, navigation alignment, logo visibility + sizing per state (default / sticky / mobile), CTA setup, search, sticky behavior, and the mobile drawer social block. Configure these first and most of the header is wired up before you touch any styling.
Nav Alignment
Select
Default: Left
Position of the main navigation menu relative to the logo and CTAs. The flex layout adjusts so the menu, logo, and CTAs share the row according to this anchor.
left Menu hugs the logo on the left (default)center Menu centered between logo and CTAsright Menu hugs the CTAs on the right
Show Logo
Toggle
Default: On
Show or hide the logo image entirely. Off is useful for landing pages running the Header Override module, where you may want a stripped-down header with only nav or CTAs.
Logo Max Height
Slider (20-80px)
Default: 40px
Shown when: Show Logo is on
Maximum rendered height for the default-state logo. The image scales width proportionally; SVG logos render crisp at any height.
Use Different Logo for Sticky
Toggle
Default: Off
Shown when: Enable Sticky is on
Swap to a separate logo image once the header enters sticky mode. Useful when your default header sits on a dark hero (white logo) but the sticky state has a light background (dark logo).
Sticky Logo Max Height
Slider (16-60px)
Default: 40px
Shown when: Enable Sticky is on
Logo height once the header is in sticky mode. Often set 4-8px smaller than the default height for a subtle "shrink-on-scroll" effect.
Use Different Logo on Mobile
Toggle
Default: Off
Shown when: Show Logo is on
Swap to a separate logo on mobile (below 992px). Handy when your full wordmark is too wide for narrow viewports and a logomark / icon-only lockup reads better.
Mobile Logo Max Height
Slider (16-60px)
Default: 32px
Shown when: Show Logo is on
Logo height on mobile devices. Smaller than the desktop default so the header bar stays compact on phones.
Show CTA
Toggle
Default: On
Master switch for the CTA button(s) on the right side of the header. Off removes both buttons and the CTA-related controls below.
Number of CTAs
Select
Default: 2
Shown when: Show CTA is on
Render one or two header CTAs. Two CTAs gives you a primary + secondary pairing (e.g. "Get Started" + "Log In"); one is cleaner for marketing sites with a single conversion goal.
1 One CTA button2 Two CTA buttons (default)
CTA Mode
Select
Default: Custom
Shown when: Show CTA is on
Pick whether the buttons are sourced from HubSpot's native CTA library (analytics-tracked CTAs from CRM) or built as custom buttons with theme styling. Choosing this here determines which CTA fields appear in the Content tab.
hubspot HubSpot CTA (use a HubSpot-managed CTA)custom Custom (default; label + link + theme button style)
CTA Top/Bottom Padding
Slider (0-30px)
Default: 10px
Shown when: Show CTA is on
Overrides the theme's default CTA vertical padding for buttons inside this header. Lets you tighten or fatten the buttons without forking the theme's button styles.
Enable Search
Toggle
Default: On
Adds a search icon in the desktop header and inside the mobile drawer. Tapping it opens an inline search field with HubSpot typeahead suggestions.
Search Placeholder
Text
Default: Search...
Shown when: Enable Search is on
Placeholder text shown inside the empty search input. Localize this per language variant of the site.
Search These
Checkbox (multi-select)
Default: Website Pages + Blog Posts
Shown when: Enable Search is on
Which HubSpot content types are queried by the typeahead. Toggle landing pages on for lead-gen sites; leave off if you don't want sales pages mixed into organic search results.
web Website Pageslp Landing Pagesblog Blog Posts
Enable Sticky
Toggle
Default: On
Pins the header to the top of the viewport once the user scrolls past it. Sticky mode is what triggers the sticky logo swap, sticky padding, sticky shadow, and sticky background color (configured in the Style group).
Show Social Icons
Toggle
Default: On
Shows social media icons inside the mobile drawer (below the nav links). URLs come from the Social Links group in Content. Turn off for a tighter drawer that's nav + CTA only.
Social Icon Size
Slider (16-48px)
Default: 20px
Shown when: Show Social Icons is on
Pixel size of each social icon inside the mobile drawer. Larger values give the social row more visual weight.
/// Content
The actual content the header renders: top hat links, the logo image(s), the navigation menu (HubSpot menu or custom items with icons + dropdowns), the CTA buttons, and the social URL list.
Sub-group for the utility bar above the main header. Only renders when Enable Top Header is on.
Top Header Links
Simple menu
Default: Privacy Policy, Terms of Service, Contact Us
The link list rendered inside the top header bar. Uses HubSpot's simple menu field so each item can point to a page link, file, or external URL. Children of items are not rendered - the top header is intentionally flat.
/// Logo
Logo source images. The default logo always shows; sticky and mobile logos only render when the matching toggles in Start Here are on.
Logo Image
Image
Default: blox-logo-black.svg (140×40)
The default-state logo. SVG is preferred for crisp rendering at any header height; PNG works if you don't have vector source. Keep the file under 30KB for a fast first paint.
Logo Link
Link
Default: #0 (no destination)
Where clicking the logo goes. Typically the home page. Supports external URLs, HubSpot content, file links, and blog posts.
Sticky Logo Image
Image
Default: empty
Shown when: Use Different Logo for Sticky is on
The logo image to swap in once the header enters sticky mode. Leave empty to fall back to the default logo.
Mobile Logo Image
Image
Default: empty
Shown when: Use Different Logo on Mobile is on
The logo image shown on devices below 992px. Often a logomark / icon-only version of the wordmark so the header bar stays compact.
/// Mega Menu
The blox header ships with a full Mega Menu system, not just a plain dropdown. Each top-level nav item can open a single-column flyout, a two/three/four-column panel with grouped sections, icons, and item descriptions, or a flat link with no dropdown at all. You configure it per item, so one header can mix all four layouts side by side.
Navigation Mode
Select
Default: Custom Menu
Which source drives the menu. There are two completely different content models behind this toggle - pick based on whether you need the full Mega Menu treatment or just a simple inherited menu.
custom Custom Menu (Mega Menu mode) - Build items directly in the Header module. Supports icons, descriptions, column titles, 1/2/3/4 column layouts, per-item dropdown configuration. This is the default and the richer option.hubspot HubSpot Menu - Use a menu managed under Marketing > Navigation. Renders as a simple text-only dropdown (no icons, no descriptions, no column groupings). Best for sites that already centralize navigation in HubSpot or need editors to update the nav without touching theme settings.
When Navigation Mode is set to Custom Menu, the entire menu is built using the Navigation Items repeater. Each entry in the repeater is one top-level nav link (Home, Products, Resources, etc.) plus its own optional dropdown panel.
Navigation Items (repeater)
Repeater
Default: 5 items (Home, Templates, Products, Resources, Pricing)
Shown when: Navigation Mode is Custom Menu
The top-level items in the menu bar, left to right. Each item has its own settings - so one item can be a flat link, the next a single-column dropdown, the next a four-column mega panel. Re-order items with drag handles in the HubSpot editor.
Label
Text
Default: Products
The visible link text shown in the menu bar (e.g., "Products", "Solutions", "Resources"). Keep these short - one or two words read best in a horizontal nav. The label appears in both the desktop menu and the mobile drawer.
URL
Link
Default: #0
Where the top-level link goes when clicked directly. Even when Has Dropdown is on, the parent link itself is still clickable - the dropdown opens on hover. Use a real landing page URL here for SEO and accessibility, or set it to #0 if the parent is truly just a label that opens the dropdown.
Tip: For pure "category-only" items where there is no parent destination (e.g., "Solutions"), point the URL to the dropdown\'s most-used sub-item rather than #0 - keyboard users who Enter the parent get somewhere sensible.
Has Dropdown
Toggle
Default: On
Turn the dropdown panel on or off for this specific item. Off renders a flat link in the menu bar with no chevron and no hover panel - good for direct-action items like "Pricing" or "Contact." On enables the Dropdown Columns, Show Icons in Dropdown, and Dropdown Items fields below.
Dropdown Columns
Select
Default: 1 Column
Shown when: Has Dropdown is on
How many columns the dropdown panel uses. This is the main shape-of-mega-menu choice for the item. Use cases for each:
1 1 Column - Classic dropdown that aligns under the parent link. Width is auto-sized to the longest item. Best for short lists of 2-6 sub-pages (e.g., "About / Team / Careers / Contact").2 2 Columns - Mid-size panel that centers below the menu bar. Good for grouping items into two related sets (e.g., "Products" with Solutions on the left and Resources on the right).3 3 Columns - Larger mega panel for richer information architectures. Each column can carry its own Column Title to act as a section header.4 4 Columns - Full mega menu. Centers across the viewport and uses the Multi-Column Dropdown Width (default 1100px). Best when you have 12-25 sub-items spread across logical groups.
Note: Multi-column dropdowns (2, 3, 4) center on the screen rather than aligning under the parent link. The width comes from Dropdown Style > Multi-Column Dropdown Width (default 1100px; set to 0 to use built-in defaults of 520/740/920px for 2/3/4 columns).
Show Icons in Dropdown
Toggle
Default: On
Shown when: Has Dropdown is on
Show the FontAwesome icon to the left of each dropdown item label. On gives a richer, app-like feel; off renders a compact text-only dropdown - good for traditional informational nav (About / Team / Press / Contact) where icons would feel decorative.
The icon column itself uses Dropdown Style > Icon Color, Icon Background, Icon Size, and Icon Border Radius for styling.
Dropdown Items (sub-repeater)
Repeater
Default: 4 items
Shown when: Has Dropdown is on
The actual links inside the dropdown panel. Each item lives as a card with optional icon, label, description, and URL. Drag to reorder; reorder also controls which items fall into which column in multi-column dropdowns.
Column Title
Text
Default: (empty)
Optional category header rendered above this item. Used as a section label in multi-column dropdowns - set Column Title only on the first item of each column, then leave it blank on the items below. The renderer treats a non-empty Column Title as the start of a new visual column group.
Example for a 3-column mega menu: Item 1 (Column Title: "Solutions"), Items 2-4 (no Column Title - they stack under "Solutions"), Item 5 (Column Title: "Products"), Items 6-8 (stack under "Products"), Item 9 (Column Title: "Resources"), Items 10-12 (stack under "Resources"). Columns wrap automatically based on these markers.
In 1-column dropdowns Column Title still renders but loses its column-break behavior - leave it blank unless you intentionally want section sub-headers in a single column.
Icon
Icon picker (FontAwesome 6.4.2)
Default: check (solid)
Shown when: Show Icons in Dropdown is on
The icon displayed in the colored circle to the left of the item label. Browse the full FontAwesome 6.4.2 free library through the HubSpot icon picker. Match icons to meaning - fa-house for home variants, fa-users for team pages, fa-briefcase for careers, fa-file-contract for legal/case studies.
The icon container size (40px default) and border radius (50% = circle, lower = rounded square) come from Dropdown Style.
Label
Text
Default: Menu Item
The dropdown item\'s headline - typically 1-3 words ("Image & Text", "Pricing Table", "About Us"). This is the bold, primary line of each card. Styled via Dropdown Style > Title Color.
Description
Text
Default: Brief description of this item
A short subtitle rendered below the label - one short sentence (under ~60 characters reads best). Helps users tell similar items apart in a mega menu ("Two-column section with image + rich text" vs "Three-row text reveal with scroll trigger"). Styled via Dropdown Style > Description Color. Leave blank for a tighter label-only look.
URL
Link
Default: #0
Destination for this dropdown item. Supports internal HubSpot pages, external URLs, file downloads, and email links via HubSpot\'s standard link picker. The entire card is clickable - icon, label, and description all link to the same URL.
/// CTAs
The CTA button content. The shown sub-group depends on CTA Mode (HubSpot vs. Custom) in Start Here.
HubSpot CTAs
Group
Shown when: CTA Mode is HubSpot CTA
Pick existing HubSpot CTAs from your CTA library. These render the CTA HTML HubSpot ships with full click tracking.
hubspot_cta_primary Primary CTA (HubSpot CTA picker).hubspot_cta_secondary Secondary CTA (HubSpot CTA picker). Shown when Number of CTAs is 2.
Custom CTAs
Group
Shown when: CTA Mode is Custom
Manually-configured buttons styled with the theme's six CTA classes. Two nested groups, one per button.
Primary CTA
Group
Sub-fields:
btn_label Button Label (text, default "Get Started").link Link (URL, default "#0").btn_style Button Style (select, default Primary). Picks one of the theme's six CTA classes: cta-primary, cta-secondary, cta-tertiary, cta-four, cta-five, cta-six.
Secondary CTA
Group
Shown when: Number of CTAs is 2
Same shape as the primary CTA but with different defaults:
btn_label Button Label (text, default "Learn More").link Link (URL, default "#0").btn_style Button Style (select, default Secondary). Same six options as the primary CTA.
/// Social Links
Social media URLs used by both the top header social row and the mobile drawer social block. Leave a field empty to hide that icon. Only renders when Show Social Icons is on in Start Here.
Facebook URL
Text
Default: https://www.facebook.com/
Facebook page URL. Replace with your actual page URL or clear to hide the icon.
Instagram URL
Text
Default: https://www.instagram.com/
Instagram profile URL.
YouTube URL
Text
Default: http://youtube.com/
YouTube channel URL.
LinkedIn URL
Text
Default: https://www.linkedin.com/
LinkedIn page URL.
/// Style
Every visual control: per-state color/padding/border/shadow (default, sticky, mobile, mobile sticky), search styling, dropdown styling, mobile drawer styling, and the header container width.
Colors and spacing for the top utility bar. Only visible when Enable Top Header is on.
Background
Color
Default: #f5f5f5 @ 100%
Background fill of the top header bar.
Link Color
Color
Default: #666666 @ 100%
Default-state color for the top header links.
Link Hover Color
Color
Default: #1a1a1a @ 100%
Hover-state color for the top header links.
Separator Color
Color
Default: #d0d0d0 @ 100%
Shown when: Show Link Separators is on
Color of the vertical pipe between each top header link.
Social Icon Color
Color
Default: #666666 @ 100%
Shown when: Show Social Icons in Top Header is on
Default-state color of the top header social icons.
Social Icon Hover
Color
Default: #1a1a1a @ 100%
Shown when: Show Social Icons in Top Header is on
Hover-state color of the top header social icons.
Font Size
Slider (10-18px)
Default: 13px
Font size for the top header links.
Padding (Top/Bottom)
Slider (0-20px)
Default: 8px
Vertical padding inside the top header bar.
Show Bottom Border
Toggle
Default: On
Renders a 1px border at the bottom of the top header bar to separate it from the main header.
Border Color
Color
Default: #e0e0e0 @ 100%
Shown when: Show Bottom Border is on
Color of the top header's bottom border.
Colors, padding, and border for the main header bar in its default (non-sticky) state.
Background Color
Color
Default: #ffffff @ 100%
Header background fill. Set opacity to 0 for a transparent header that sits over the hero.
Nav Link Color
Color
Default: #1a1a1a @ 100%
Default-state color of the main navigation links.
Nav Hover Color
Color
Default: #555555 @ 100%
Hover-state color of the main navigation links.
Border Enabled
Toggle
Default: On
Renders a bottom border on the main header to separate it from the page below.
Border Color
Color
Default: #e0e0e0 @ 100%
Shown when: Border Enabled is on
Color of the header's bottom border.
Border Width
Slider (1-5px)
Default: 1px
Shown when: Border Enabled is on
Thickness of the header bottom border.
Hamburger Icon Color
Color
Default: #1a1a1a @ 100%
Color of the three-line mobile menu icon when the header is in its default state.
Nav Hover Underline
Color
Default: #1a1a1a @ 0% (off)
Color of the animated underline that appears under nav links on hover. Set opacity to 0 to disable the underline entirely.
/// Search Style
Colors and sizing for the search icon, input field, and typeahead results panel. Only visible when Enable Search is on.
Icon Color
Color
Default: #1a1a1a @ 100%
Default-state color of the search magnifying-glass icon.
Icon Hover Color
Color
Default: #555555 @ 100%
Hover-state color of the search icon.
Input Background
Color
Default: #ffffff @ 100%
Background fill of the expanded search input field.
Input Border Color
Color
Default: #e0e0e0 @ 100%
Border color of the search input field.
Input Text Color
Color
Default: #1a1a1a @ 100%
Text color inside the search input field.
Results Background
Color
Default: #ffffff @ 100%
Background fill of the typeahead suggestions panel.
Results Hover Background
Color
Default: #f5f5f5 @ 100%
Hover-state background of an individual typeahead result row.
Results Text Color
Color
Default: #1a1a1a @ 100%
Text color of the typeahead result rows.
Search Bar Width
Slider (200-500px)
Default: 320px
Width of the expanded search input bar.
/// Dropdown Style
Visual treatment for the nav dropdown panels: background, border, shadow, icon styling, dropdown spacing, and multi-column width.
Background
Color
Default: #ffffff @ 100%
Background fill of the dropdown panel.
Border Color
Color
Default: #e0e0e0 @ 100%
Border color of the dropdown panel.
Border Radius
Slider (0-24px)
Default: 12px
Rounded corner radius of the dropdown panel. 12px matches the theme's default tile rounding.
Shadow Color
Color
Default: #000000 @ 5%
Color + opacity of the dropdown's drop shadow. Stay under 10% opacity to avoid a heavy look.
Title Color
Color
Default: #1a1a1a @ 100%
Color of each dropdown item's title text.
Description Color
Color
Default: #666666 @ 100%
Color of each dropdown item's description / subtitle text.
Hover Background
Color
Default: #f5f5f5 @ 100%
Background fill of a dropdown item on hover.
Icon Color
Color
Default: #1a1a1a @ 100%
Color of the FontAwesome icon inside each dropdown item's icon circle.
Icon Background
Color
Default: #f5f5f5 @ 100%
Background fill of the circle that holds each dropdown item icon.
Icon Size
Slider (24-64px)
Default: 40px
Size of the icon circle in dropdown items.
Icon Border Radius
Slider (0-50%)
Default: 50%
Roundness of the icon container. 50% is a perfect circle; 0 is a square; 8-12% gives a soft rounded square.
Dropdown Offset (Top)
Slider (0-30px)
Default: 8px
Vertical gap between the nav item and the dropdown panel.
Multi-Column Dropdown Width
Slider (0-1400px)
Default: 1100px
Custom width for multi-column (2/3/4-column) dropdowns. Leave at 0 to use the theme's per-column defaults (520 / 740 / 920px).
Column Title Color
Color
Default: #999999 @ 100%
Color of the column heading text in multi-column dropdowns.
Column Title Font Size
Slider (8-16px)
Default: 11px
Font size of the column heading text. Small (11px) gives the eyebrow / label feel; larger reads more like a section title.
/// Sticky Style
Styles applied while the header is in sticky mode (via Enable Sticky or forced on by the Header Override module).
Background
Color
Default: #ffffff @ 95%
Background fill while the header is stuck. The default 95% opacity gives a slight frost effect over scrolling content.
Nav Color
Color
Default: #1a1a1a @ 100%
Nav link color while the header is stuck.
Nav Hover Color
Color
Default: #555555 @ 100%
Nav link hover color while the header is stuck.
Sticky Padding (Top/Bottom)
Slider (0-40px)
Default: 20px
Vertical padding while sticky. Drop this 4-8px below the default header padding for a subtle shrink-on-scroll effect.
Border Enabled
Toggle
Default: On
Renders a bottom border while the header is stuck.
Border Color
Color
Default: #e0e0e0 @ 50%
Shown when: Border Enabled is on
Color of the sticky-state bottom border. 50% opacity by default for a softer separator.
Shadow Enabled
Toggle
Default: On
Renders a drop shadow under the sticky header to visually lift it off the page.
Shadow Color
Color
Default: #000000 @ 8%
Shown when: Shadow Enabled is on
Color + opacity of the sticky drop shadow.
Hamburger Icon Color
Color
Default: #1a1a1a @ 100%
Mobile menu hamburger icon color while sticky.
Nav Hover Underline
Color
Default: #ffffff @ 0% (off)
Color of the nav link underline on hover while sticky. Set opacity to 0 to disable.
/// Mobile Settings
All mobile styles in one place: the mobile header bar, the mobile sticky state, and the slide-out drawer.
Mobile Sticky
Group
Shown when: Enable Sticky is on
Styles for the sticky header on mobile:
mobile_sticky_bg_color Background (color, default #ffffff @ 95%).mobile_sticky_padding Padding Top/Bottom (slider 0-40px, default 10px).mobile_sticky_shadow_enabled Show Shadow (toggle, default On).mobile_sticky_shadow_color Shadow Color (color, default #000000 @ 8%). Shown when Show Shadow is on.mobile_sticky_hamburger_color Hamburger Icon Color (color, default #1a1a1a).
/// Row Settings
Container width for the entire header. There's no per-breakpoint padding here - row spacing is set per state via Header Padding, Sticky Padding, Mobile Padding, and Mobile Sticky Padding above.
Size (Content Width)
Group
Default: Standard
Which container width the header uses:
standard Standard (uses theme's standard container width, set in Theme Settings > Layout). Default.slim Slim (narrower variant, also set in Theme Settings).full Full Width (stretches edge-to-edge).custom Custom (reveals Custom Width number input, 600-1920px, default 1200).