How to keep event info visible on a scroll in Squarespace

Jul 5

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

This quick tutorial will show you how to create “sticky” event info so that it stays at the top of the screen on an individual event page.

There is a part of this code you’ll need to change to make sure it looks perfect on your own site. Your values will need to be larger or smaller depending on the font that you are using.

I recommend using an absolute value like PX or REM. You can learn more about values at insidethesquare.co/resources/length-values

Here is the code featured in this Squarespace tutorial. The values you’ll want to change are in bold.

.eventitem-title {position:sticky!important; top: 5vh!important}
.eventitem-meta{position:sticky!important; top: 15vh!important}
.event-meta-addtocalendar-container.eventitem-meta{position: sticky!important; top: 25vh!important}