How To Create a Floating Header in Squarespace

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:

  1. When you log into Squarespace, select Website.

  2. Scroll down to the bottom of your pages list and select Website Tools

  3. Select the Custom CSS option

  4. Paste the code above in your custom CSS.

  5. Change the any of the values to suit the style of your site.

  6. Select save and refresh the page!

insidethesquare

Squarespace Circle Leader & Creator of InsideTheSquare.co

https://insidethesquare.co
Previous
Previous

How To Create a Single Page Website in Squarespace

Next
Next

How to create a split layout with section dividers in Squarespace