Sticky Category Links for Video Collection Pages

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

Video collections are brand new to Squarespace and this tutorial will help you customize them.

We’ll be working on the main video page that lists them all, creating a “Sticky” effect for your category links.

If you have a sidebar navigation enabled or a top bar, this tutorial works with both!

We will use some custom CSS to make sure those navigation links stop at the top of the page when viewed on desktop.

Pro Tip: You can change the selector below to create the same effect for your online store! Update the selectors below by replacing the word .lessons with .products

Here is the code for the sidebar category links:

.lessons .nested-category-tree-wrapper {
position:sticky;
top:1rem
}

And this code is for the top bar category links:

Change up the #FFF hex color code to whatever suits your website’s style!

.lessons .nested-category-children{
position: sticky!important;
top:0;
z-index:99!important;
background:#FFF!important
}