Website Building » Squarespace » How Do I Make My Squarespace Navigation Sticky?

How Do I Make My Squarespace Navigation Sticky?

Last updated on October 1, 2022 @ 3:40 am

If you want to make your Squarespace navigation sticky, there are a few things you can do. First, you need to add a little CSS to your site.

You can do this by going to the Design tab and then clicking on Custom CSS. Add the following code:

.sqs-navigation-wrapper {position:fixed !important; top:0px; left:0px; z-index:9999;}

This will make sure that your navigation stays at the top of the page when someone scrolls down. You can also add the following code to make sure that the navigation doesn’t overlap any content on your page:

PRO TIP: If you are not careful, making your Squarespace navigation sticky can result in a mess. Be sure to test your changes thoroughly before making them live, and be prepared to roll back if necessary.

.sqs-navigation-wrapper {padding-top:40px;}

You can adjust the padding to whatever you want. If you want to change the color of the navigation, you can do that by going to Design > Styles and then choosing a new color for your navigation.

Conclusion

Making your Squarespace navigation sticky is a great way to keep people on your site. By adding a little CSS, you can make sure that it stays at the top of the page and doesn’t overlap any content. You can also change the color of the navigation by going to Design > Styles.

Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.