SR Navigation 01
This renders the full site header with an optional top bar (announcement text or a menu), a logo, a multi-level menu with mega menu support, search, a language switcher, and a CTA button, all in one bar.
Pick it over SR Nav Min 01 or SR Nav Off Canvas 01 when the site needs a visible top bar, dropdowns nested more than one level, or a mega menu shown inline in the header rather than hidden behind a toggle. It supports per-page, per-page-type, and per-language overrides for the top bar, logo, menu, button, and search, so use it as the global header on marketing sites with several menu levels or a blog section.
Use cases
- Global site header with dropdown menu
- Header with mega menu for product categories
- Announcement bar plus main navigation
- Header with search and language switcher
- Blog header with tag search
- Header with per-language menu overrides
Where it fits
- Included with: Free
- Page sections: Navigation
Editable fields
Content tab
Settings
| Field | Type | Notes |
|---|---|---|
| Width | Choice | Options: Default, Container, Small, Large, Full Width. |
| Fixed | Boolean | By checking this option additional fields for a logo ( Content -> Logo ), background color ( Style -> Menu -> Background ), and font color ( Style -> Menu -> Text ) will be made available. These options will enable you to dynamically alter the color of your navigation as the user scrolls down the page. |
| Hide on Scroll Down | Boolean | Make the navigation disappear as the user scrolls down the page, and reappear when they scroll up. |
| Floating Navigation | Boolean | Make the navigation float in the container. |
| Mega Menu | Boolean | |
| Mobile Breakpoint | Number | Breakpoint at which the navigation layout changes to include a toggle button. A wider menu will require a larger breakpoint to prevent wrapping. |
Top bar
| Field | Type | Notes |
|---|---|---|
| Show Topbar On Scroll | Boolean | |
| Type | Choice | Options: None, Announcement, Menu. |
| Menu | Menu | Repeats: min 1, max 2, default 1. |
| Rich Text | Rich text |
Top bar › Social
| Field | Type | Notes |
|---|---|---|
| Position | Choice | Options: Left, Center, Right. |
Top bar › Social › Icon Repeats: default 0.
| Field | Type | Notes |
|---|---|---|
| Type | Choice | Options: Icon, Image, SVG. |
| Icon | Icon | |
| Image | Image | |
| SVG | Text | Paste your SVG code below. |
| Size | Number | |
| Color | Color | |
| Background | Color | Set opacity to 0 to disable the background. |
| Link | Link | |
| Aria Label | Text | The aria-label attribute is used on links that have no accessible name to give it meaning to screen readers. |
| Purpose | Choice | The purpose of the icon, used for accessibility. If set to decorative, an additional attribute of aria-hidden="true" will be added to the icon. Options: Decorative, Semantic. |
Logo
| Field | Type | Notes |
|---|---|---|
| Link | Link | |
| Logo | Logo | |
| Logo on Scroll | Logo | |
| Use separate Logo on Mobile | Boolean | |
| Mobile Logo | Logo | |
| Mobile Logo on Scroll | Logo |
Menu
| Field | Type | Notes |
|---|---|---|
| Menu | Menu | |
| Max levels | Number | Determines the number of menu tree children that can be expanded in the menu. Note: Items with child items will not be clickable. |
Language switcher By adding a language switcher you can allow your visitors to select their preferred language. Custom multi-language content will not be translated automatically. Learn More.
| Field | Type | Notes |
|---|---|---|
| Enabled | Boolean | The language switcher will only appear if there is a multi-language variation for a page. |
| Display mode | Choice | The language of the text in the language switcher. PageLang means the names of languages will display in the language of the page the switcher is on. Localized means the name of each language will display in that language. Hybrid is a combination of the two. Options: Localized, PageLang, Hybrid. |
| Position | Choice | Options: Top Bar, Main Menu. |
Button › CTA Repeats: min 0, default 1.
| Field | Type | Notes |
|---|---|---|
| CTA Type | Choice | Options: HubSpot CTA, HubSpot Payment, Button, Modal. |
| CTA Style | Choice | 26 options, including Primary, Secondary, Tertiary. |
| CTA | CTA | |
| Button Text | Text | |
| Modal Target | Text | |
| Link | Link | |
| Payment link | Payment | |
| Checkout behavior | Choice | Options: Open in a new tab, Sliding overlay. |
| CTA Size | Choice | Options: Small, Default, Large. |
| Add icon | Boolean |
Button › CTA › Default
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border | Color |
Button › CTA › Hover
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border Color | Color |
Button › CTA › Icon
| Field | Type | Notes |
|---|---|---|
| Icon | Icon | |
| Position | Choice | Options: Left, Right. |
| Purpose | Choice | The purpose of the icon, used for accessibility. If set to decorative, an additional attribute of aria-hidden="true" will be added to the icon. Options: Decorative, Semantic. |
Search Use the site search input module to help visitors search your site. Search results are displayed on your search results system page or by adding the search results module. Learn more.
| Field | Type | Notes |
|---|---|---|
| Enabled | Boolean | |
| Placeholder text | Text | |
| Use custom search results page | Boolean | Turn this setting on to use a custom search results page instead of the default global search results page. |
| Search results page | Page | This is where people will go when they click to search their search term. Make sure to choose a page that contains the search results module. |
Search › Search results include
| Field | Type | Notes |
|---|---|---|
| Website pages | Boolean | |
| Landing pages | Boolean | |
| Blog posts | Boolean | |
| Knowledge articles | Boolean |
Blog
| Field | Type | Notes |
|---|---|---|
| Enable | Boolean | |
| Tags Limit | Number |
Blog › Blog Title Repeats: min 0, default 1.
| Field | Type | Notes |
|---|---|---|
| Heading | Text | |
| Size | Choice | HTML heading size. Options: H1, H2, H3, H4, H5, H6, P. |
| Display Size | Choice | Size that heading is displayed at. 12 options, including Auto, H1, H2. |
| Color | Choice | 15 options, including Auto, Primary, Secondary. |
| Color | Color | |
| Align | Choice | Options: Auto, Left, Center, Right. |
| CSS Class | Text |
Blog › Search Use the site search input module to help visitors search your site. Search results are displayed on your search results system page or by adding the search results module. Learn more.
| Field | Type | Notes |
|---|---|---|
| Enabled | Boolean | |
| Placeholder text | Text |
Blog › Search › Search results include
| Field | Type | Notes |
|---|---|---|
| Website pages | Boolean | |
| Landing pages | Boolean | |
| Blog posts | Boolean | |
| Knowledge articles | Boolean |
Page Specific Settings Repeats: default 1. Change the navigation's settings on specific pages.
| Field | Type | Notes |
|---|---|---|
| Description | Text | This is an options field. Use it to describe what the purpose of this override does. i.e. Homepage settings, Remove menu on landing pages, etc. |
| Page | Page | Repeats: default 0. Select the page you want to override the settings for. |
| Page Type | Choice | 11 options, including Website Pages, Landing Page, Blog Listing. |
| Language | Text | A two-letter code. Codes can be found here . |
Page Specific Settings › Top bar
| Field | Type | Notes |
|---|---|---|
| Show Topbar On Scroll | Boolean | |
| Type | Choice | Options: None, Announcement, Menu. |
| Menu | Menu | Repeats: min 1, max 2, default 1. |
| Rich Text | Rich text | |
| Disable Icons | Boolean |
Page Specific Settings › Logo
| Field | Type | Notes |
|---|---|---|
| Link | Link | |
| Logo | Logo | |
| Logo on Scroll | Logo | |
| Mobile Logo | Logo | |
| Mobile Logo on Scroll | Logo |
Page Specific Settings › Menu
| Field | Type | Notes |
|---|---|---|
| Disable Menu | Boolean | |
| Menu | Menu | |
| Mega Menu | Boolean | |
| Background | Color | |
| Color | Color | |
| Shadow | Color |
Page Specific Settings › Button
| Field | Type | Notes |
|---|---|---|
| Disable Button | Boolean |
Page Specific Settings › Button › CTA Repeats: min 0, default 0.
| Field | Type | Notes |
|---|---|---|
| CTA Type | Choice | Options: HubSpot CTA, HubSpot Payment, Button, Modal. |
| CTA Style | Choice | 26 options, including Primary, Secondary, Tertiary. |
| CTA | CTA | |
| Button Text | Text | |
| Modal Target | Text | |
| Link | Link | |
| Payment link | Payment | |
| Checkout behavior | Choice | Options: Open in a new tab, Sliding overlay. |
| CTA Size | Choice | Options: Small, Default, Large. |
| Add icon | Boolean |
Page Specific Settings › Button › CTA › Default
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border | Color |
Page Specific Settings › Button › CTA › Hover
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border Color | Color |
Page Specific Settings › Button › CTA › Icon
| Field | Type | Notes |
|---|---|---|
| Icon | Icon | |
| Position | Choice | Options: Left, Right. |
| Purpose | Choice | The purpose of the icon, used for accessibility. If set to decorative, an additional attribute of aria-hidden="true" will be added to the icon. Options: Decorative, Semantic. |
Page Specific Settings › Search
| Field | Type | Notes |
|---|---|---|
| Disable Search | Boolean | |
| Background | Color | |
| Color | Color |
Style tab
Change log
| Version | Change |
|---|---|
| 4.0.5 | Fixed navbar dropdown z-index issue |
| 4.0.4 | Fixed search input focus issue |
| 4.0.3 | Fixed menu display when menu is not set in the page specific settings |
| 4.0.2 | Fixed a navigation display issue |
| 4.0.1 | Fixed mobile menu background border |
| 4.0.0 | Stardust update |
| 3.1.3 | Added option to set search icon color |
| 3.1.2 | Fixed logo display when logo is not set and submnenu alignment for last 2 items on desktop |
| 3.1.1 | Aria label fix |
| 3.1.0 | Accessibility improvements |
| 3.0.5 | Fixed arrow svg colors |
| 3.0.4 | Fixed minor layout issues |
| 3.0.3 | Added a min width value to keep the language switcher links in appropriate width |
| 3.0.2 | Fixed transition on mega menu links. |
| 3.0.1 | Fixed topbar hover color. |
| 3.0.0 | Update to used Logo fields, ask Support before updating. |
| 2.0.0 | Converted to Non-global module |
| 1.0.15 | Fixed navigation overlay when topbar is not fixed |
| 1.0.14 | Fixed language display mode |
| 1.0.13 | CTAs with anchor links close the nav when clicked |
| 1.0.12 | Top level nav items can now be links |
| 1.0.11 | Bug fixes |
| 1.0.10 | Added ability to fix the topbar at the top of the page |
| 1.0.9 | Added default container option |
| 1.0.8 | Added new Link options |
| 1.0.7 | Added mobile link color independent of the desktop link color |
| 1.0.6 | Fixed top bar menu bug when page specific setting is set |
| 1.0.5 | Anchor link in nav closes the navigation module on mobile. Submenu background color fixes on mobile |
| 1.0.4 | Added mobile menu background field |
| 1.0.3 | Cursor hover on nav item without link that contains child items set to auto |
| 1.0.2 | Added Custom Fonts toggle |
| 1.0.1 | Fixed nav offset on iOS devices when search is clicked |
SR Nav Off Canvas 01
This renders a compact top bar with a logo and a toggle button that opens a full-screen overlay menu containing up to 4 flat nav links (each with an optional numbered marker), an optional search field, and an optional language switcher, plus CTA buttons that show inline on desktop and inside the overlay on mobile.
SR Hero 01
Renders a full-bleed cover hero with a heading, rich text description, and up to two CTA buttons over a single background image or video.