Fixed Side Navigation for Courses

Code Toolkit

Jan 19

What You'll Create

A permanent sidebar navigation for Squarespace Courses that stays visible on the left side of the screen. Students can always see the course outline and their progress without clicking to toggle the menu open.

The Problem It Solves

Squarespace's default course navigation collapses into a toggle menu, which can make it harder for students to track their progress and navigate between lessons. This technique keeps the navigation always visible on desktop, improving the learning experience.

Perfect For

Online courses, Training programs, Multi-lesson tutorials, Certification programs, Educational content sites

What Makes This Different

This technique transforms the course navigation from a hidden toggle menu into a permanent 25% width sidebar. The lesson content shifts to occupy the remaining 75% of the screen. Students can see all chapters and lessons at a glance, with progress indicators always visible. The layout maintains a clean, bordered design that separates navigation from content, similar to professional learning management systems.

Details

Section Type: Fluid & Classic
Code Type: CSS
Prerequisites: Squarespace Courses feature enabled, desktop screens 1025px or wider
Toolkit Title: Course Fixed Side Navigation

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

The complete, copy-paste code
Video walkthrough explaining how it works
The principles behind the technique so you can customize it
Access to our private community for support

Get Access to Standout Squarespace →

Squarestylist Support