Looking to add a sub menu that sticks on scroll that is unique to your individual pages? Our Sticky sub menu can help you add one to any of your pages.
TABLE OF CONTENTS
Page Speed Impact
Module Options
How will the sticky sub menu affect my page speed?
Low - Very minimal impact to page load speed, the code for this module has been optimized to limit resources needed on page load.
Take a look at our performance guide to get your website running its best!
What Is the Links Section Used For?
The Links section defines the sub-menu items displayed in the Sticky Sub-Menu module.
How do I add or edit links?
-
One default link is included. Hover and select Edit to modify it.
-
Add new links by clicking + Add or by cloning an existing item.
See also: Theme Settings → Navigation
How Do I Configure Link Text and Link Types?
What is “Link Text”?
Each menu item has a Link Text field where you define the visible label.
What link types can I choose?
You can select:
How do I set up a Local Anchor Link?
Use a valid anchor starting with a hashtag:
#section-id
Make sure the target ID exists on the page.
How do I set up an External Link?
-
Add the full URL.
-
Optional:
-
Open in new window
-
Set as nofollow
-
See also: Anchor Links Documentation
How Do I Configure the Layout?
How do I make links full width?
Layout → Content Full Width
-
Checked: Links stretch across the full viewport.
-
Unchecked: Links follow the content width.
Note: You can still make the background full width by adjusting Section Alignment & Spacing.
How do I center the menu links?
Enable Layout → Centered.
What is the Scroll Indicator?
Layout → Show Scroll Indicator
-
Shows how far a user has scrolled.
-
Indicator is based on cursor position, not link alignment.
-
On very long pages, it may scroll past a link.
How do I configure the Mobile Trigger Button?
-
Position: Bottom Right or Bottom Left
-
Bottom Offset: Distance from the bottom (default: 10px)
-
The button uses a burger-menu icon and expands the sub-menu upward.
Tip: To hide the Sticky Sub-Menu on mobile, use the module visibility settings.
How do I adjust padding and margin?
Choose from: Standard, None, Small, Medium, Large, or First Section with Header.
Values are defined in your theme settings.
See also: Section settings.
How Do I Style the Sticky Sub-Menu?
How do I select a color scheme?
Style → Color Scheme: Light or Dark
-
Light: Light background, dark text
-
Dark: Dark background, light text
Switch schemes to maintain text contrast when changing the background.
How do I overwrite link colors?
-
Leave blank to inherit theme values.
-
Set custom colors with hex codes or the HubSpot color picker.
Available overrides:
-
Link Color
-
Link Hover/Active Color
-
Scroll Indicator Color
How do I set typography?
-
Font Size Desktop
-
Font Size Mobile
-
Font Weight (must exist in theme settings)
-
Letter Spacing
Note: If a chosen font weight isn’t available in theme settings, it will fall back to the next available weight.
How do I control spacing and effects?
-
Horizontal Spacing between Links: Default is 30px
-
Show Box Shadow: Adds depth to the sticky bar
-
Scroll Shadow:
-
None
-
Same as Background Color (indicates additional horizontal scrolling when links overflow)
-
What background options are available?
Choose from:
-
Background Color
-
Background Image/Video
-
Background Gradient
-
Transparent
See also: Section Module Background Options
How Do I Manage Visibility?
Adjust visibility settings to hide the module on:
-
Desktop
-
Tablet
-
Mobile
Useful when creating device-specific navigation.
See also: Common Module Settings → Visibility
Accessibility
Set aria labels for elements within your module to ensure compatibility with screen readers if required.