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

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:

JavaScript:

document.addEventListener("DOMContentLoaded", function () {
  // Target larger screens
  if (window.matchMedia("(min-width: 768px)").matches) { 
    // Find the menu toggle button
    var toggleButton = document.querySelector(
      ".course-item__side-nav-toggle-button"
    );
    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(
      ".course-item.nav-align-left.nav-closed"
    );
    if (sidebar) {
      sidebar.classList.remove("nav-closed");
    }
  }
});

CSS:

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

.course-item__chapter-title{
  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!

Cheers,
George

I love this but it's not scrunching over my content, so it's permanently overlapping the content.