How To Create a Floating Header in Squarespace
This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
The header of your website holds your logo, main navigation, and elements like social links if you have those enabled. It sits at the top of the screen on desktop and mobile.
In this tutorial, we’ll use custom CSS to pull this off the page so it can float above your site content. The code for this tutorial is below, but make sure you watch the tutorial video to see how to install it, and what aspects of this code you’ll need to change!
header {
margin: 2vw
}
Use this code if you want to have curved corners:
header {
margin: 2vw;
border-radius: 15px;
}
Use this code if you want the floating header to have curved corners and a frosted background:
header {
margin:2vw;
background: inherit!important;
background-color: rgba(255, 255, 255, .3)!important;
backdrop-filter: blur(5px)!important;
border-radius: 15px
}
Here is how to add this code to your site:
When you log into Squarespace, select Website.
Scroll down to the bottom of your pages list and select Website Tools
Select the Custom CSS option
Paste the code above in your custom CSS.
Change the any of the values to suit the style of your site.
Select save and refresh the page!