How to create a sticky sidebar with Sticky Split and Anchor Links
Designers run into this all the time: you want a clean, fixed sidebar for navigation, menus, or supporting content—but building one usually means custom code, plugins, or fragile workarounds.
There’s a simpler way to handle it directly inside Squarespace.
In this tutorial, you’ll learn how to create a fully functional sticky sidebar using SquareKicker’s Sticky Split tool, and how to adapt it properly for mobile without breaking your layout.
When should you add a sidebar to your website?
Sidebars are useful when your page has content that needs a clear structure—when users need to move between sections quickly or keep context as they scroll.
Common use cases:
Restaurant menus (jump between courses)
Long-form content with a table of contents
Personal or team bios alongside detailed content
Service pages with anchored sections
The goal isn’t just visual—it’s about making navigation feel effortless.
Step 1: Turn your section into a sticky sidebar
Start with the section you want to act as your sidebar.
Open the SquareKicker Extension
Go to Advanced → Sticky Split
Choose your layout:
Left or right sidebar
Sidebar width
Set how many sections should scroll alongside it
That’s it. Your layout is now split, with one side acting as a fixed sidebar while the rest of your content scrolls.
Step 2: Turn your sidebar into a working navigation
A static sidebar is useful. A clickable one is where it becomes powerful.
You can turn your sidebar into a secondary navigation using anchor links.
Add anchor links to your sections
For each section you want to link to:
Open the SquareKicker Extension
Go to Advanced → Anchor Links
Assign an ID (e.g. “breakfast”, “lunch”, “dinner”)
Apply
Link your sidebar text
In your sidebar text block:
Add links using #your-id (e.g. #breakfast)
Now your sidebar acts as a navigation system—users can jump to any section instantly.
Step 3: Refine the visual details
Small adjustments make a big difference here.
For example:
Remove link underlines for a cleaner look
Keep typography consistent (e.g. using H2 styles for menu sections)
Use spacing intentionally so links feel easy to scan
These aren’t flashy changes, but they’re what make the layout feel considered rather than assembled.
Step 4: Test the experience outside edit mode
Always check how it behaves live.
You should see:
The sidebar stays fixed while content scrolls
Clicking links smoothly jumps to each section
The layout feels stable and easy to navigate
If it feels effortless to use, you’ve done it right.
Step 5: Create a better mobile alternative
A sticky sidebar works well on desktop—but on mobile, it quickly becomes too narrow and starts to compromise your layout.
That’s why Sticky Split is disabled on mobile by default.
Instead of forcing it, create a mobile-specific alternative.
Build a mobile-friendly sticky navigation
Create a new section with your navigation content (you can use a saved section for speed)
Hide your desktop sidebar section on mobile using the Visibility tool
Open the new section in the Extension
Go to Advanced → Sticky Section
Set it to Top
Now you have a clean, full-width sticky navigation bar for mobile that mirrors your sidebar functionality.
Why this approach works
You’re not just adding a sidebar—you’re improving how people move through your page.
With SquareKicker:
You keep everything inside the Squarespace workflow
You avoid fragile custom code or plugin stacks
You build faster, with more control over layout and behavior
You deliver a more polished, client-ready experience
It’s a small change in setup, but a big improvement in how your pages feel to use.
