How To Create a Floating Header in Squarespace

Oct 31

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

About this tutorial

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!

Video tutorial

 Code Example

Here is the code from this tutorial. 
Be sure to update the values for your unique website needs!

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: