2 simple ways to create a sticky content navigation in Squarespace (7.0 & 7.1)
If you have an index page that you want to make more accessible through anchor links, you’ve probably thought about creating one of those sticky content navigations that can be seen on some long websites. If that’s the case, then today’s video is for you!
We’ll be tackling 2 ways to make this happen, so you can apply the one that fits your project the most and keep the other in your back pocket for later.
01 | CHAPTERS
00:00 - Intro
01:17 - First layout setup
02:21 - Style tweaks
05:26 - Setting links horizontally
07:18 - Fixing spacing issue
07:52 - Making navigation sticky
10:27 - Adding shadow
11:02 - Checking mobile devices
11:35 - Quick sticky tip
12:41 - Second layout tweaks
13:52 - Making navigation sticky
14:50 - Moving the navigation
15:54 - Style tweaks
16:57 - Adjusting mobile
02 | BLOG POST + RESOURCES
Find related tutorials, notes, and any code mentioned in this video:
https://beatrizcaraballo.com/blog/sti...
03 | WORK WITH ME
Need help with a Squarespace client project?
From brainstorming the best approach to hands-on implementation, I help designers navigate tricky builds and move forward with confidence:
https://beatrizcaraballo.com/services
04 | THE SOURCE NOTES
Get weekly customization tips and troubleshooting insights based on real Squarespace project challenges:
https://beatrizcaraballo.com/notes
05 | SUPPORT + INQUIRIES
Have a project challenge you’d like help with?
I prioritize client inquiries, but I also use questions and challenges I receive to inspire future tutorials. Reach out here:
https://beatrizcaraballo.com/contact
06 | NOTE
The code shown in this video is provided as-is and may need adjustments depending on your specific project and Squarespace settings.
07 | KEYWORDS
squarespace anchor links, squarespace 7.0, squarespace sticky navigation, squarespace css tutorial, squarespace 7.1, custom css squarespace, squarespace web design, squarespace custom code, squarespace web development, squarespace design tutorial, squarespace site customization, squarespace code implementation, squarespace css tricks