Fixed Courses Sidenav

Keep open & fix your course side nav to your page with this professional course layout.

Directions:

1. Paste in the Custom CSS to your Website » Website Tools » Custom CSS area.

2. Install the Squarespace ID Finder Chrome Extension if you haven’t already

3. Go to your Course Overview Page and turn on your Squarespace ID Finder. In the CSS, replace both instances of collection-id with the specific collection id at the top of your course overview page. Be sure to prepend the .collection-id class with a period and the #collection-id id with a hashtag. Watch the installation video above for a walkthrough.

Left Aligned Nav

/**
* Fixed Course Nav
* Left Aligned Nav
* From Will-Myers.com
**/
.collection-id:not(#collection-id, .sqs-edit-mode-active){
  @media(min-width: 1000px){
    margin-left: 400px;
    .course-item__side-nav{
      left: 0;
      top: 0 !important;
      bottom: 0 !important;
      height: 100vh !important;
      transform: unset !important;
    }
    .course-item__side-nav-content{
      opacity: 1 !important;
    }
    .course-item__side-nav-toggle-button{
      display: none;
    }
    .course-item__video-container {
      min-height: ~'calc(480px - (400px * (9/16)))';
      height: ~'calc((9 / 16) * (100vw - 400px))';
    }
  }
  @media(min-width: 800px){
    #header {
      display: none;
    }
  }
}

Right Aligned Nav

/**
* Fixed Course Nav
* Right Aligned Nav
* From Will-Myers.com
**/
.collection-65bb17e9a2cc7d3f00c3bc3e:not(#collection-65bb17e9a2cc7d3f00c3bc3e, .sqs-edit-mode-active){
  @media(min-width: 1000px){
    margin-right: 400px;
    .course-item__side-nav{
      right: 0 !important;
      top: 0 !important;
      bottom: 0 !important;
      height: 100vh !important;
      transform: unset !important;
    }
    .course-item__side-nav-content{
      opacity: 1 !important;
    }
    .course-item__side-nav-toggle-button{
      display: none;
    }
    .course-item__video-container {
      min-height: ~'calc(480px - (400px * (9/16)))';
      height: ~'calc((9 / 16) * (100vw - 400px))';
    }
  }
  @media(min-width: 800px){
    #header {
      display: none;
    }
  }
}

License