George_Stander

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

Have you looked at memberspace?

I figured this out if anyone is still interested... LOL.