Jump to content

George_Stander

Member
  • Posts

    3
  • Joined

  • Last visited

Reputation Activity

  1. Like
    George_Stander got a reaction from tuanphan in 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
     
×
×
  • 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.