SR Nav Min 01
This renders a minimal header bar with a logo, an optional announcement top bar with rich text, and a row of CTA buttons, but no page menu links of any kind.
Pick it over SR Nav Off Canvas 01 and SR Navigation 01 when the page has no site menu to show at all, such as a landing page where you want visitors focused on one action instead of browsing links or a mega menu. It expects a logo image and at least one CTA button configured, and has no support for nav links, dropdowns, or a mobile slide-out panel.
Use cases
- Landing page header with single cta
- Logo and get started button bar
- Minimal header with announcement banner
- Campaign page header with no menu
- Product launch page top bar
Where it fits
- Included with: Free
- Page sections: Navigation
Editable fields
Content tab
Settings
| Field | Type | Notes |
|---|---|---|
| Width | Choice | Options: Default, 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. |
Top bar
| Field | Type | Notes |
|---|---|---|
| Type | Choice | Options: None, Announcement. |
| Rich Text | Rich text |
Logo
| Field | Type | Notes |
|---|---|---|
| Link | Link | |
| Logo | Image | |
| Logo on Scroll | Image | |
| Use separate Logo on Mobile | Boolean | |
| Mobile Logo | Image | |
| Mobile Logo on Scroll | Image |
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 |
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. |
Style tab
Change log
| Version | Change |
|---|---|
| 5.0.0 | Stardust update |
| 4.1.0 | Accessibility improvements |
| 4.0.2 | Fixed background color bug |
| 4.0.1 | Added new Link options |
| 4.0.0 | Rebuilt nav without jQuery |
Browse modules
Search the Sprocket Rocket module library by name, category, or plan.
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.