Jump to content

SOLVED: How to keep the Course Navigation Menu open in Squarespace Courses.

Recommended Posts

Hi everyone,

I'm working on a custom course site for a client using Squarespace's built-in course features. To enhance the user experience, the client would like the course side navigation menu to remain open by default when accessing course activities on larger screens.

After some research, I've come up with a solution that involves a bit of custom JavaScript and CSS. Here's how it works:


document.addEventListener("DOMContentLoaded", function () {
  // Target larger screens
  if (window.matchMedia("(min-width: 768px)").matches) { 
    // Find the menu toggle button
    var toggleButton = document.querySelector(
    if (toggleButton) {
      // Prevent the button from toggling the menu closed
      var clone = toggleButton.cloneNode(true);
      toggleButton.parentNode.replaceChild(clone, toggleButton);

    // Open the side navigation
    var sidebar = document.querySelector(
    if (sidebar) {


.course-item__lesson-title {
  font-size: 20px !important;
  text-align: right;

  text-align: right;

Inject both into your page header with <script> and <style> tags!

Additional notes:
The min-width value in the JavaScript may need adjustment based on your preference.
I'm open to feedback and suggestions for alternative or more efficient approaches.
Let me know if you have any questions or need assistance!



Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.