InsideTheSquare.co

View Original

How To Create a Floating Header in Squarespace

See this content in the original post

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!

See this content in the original post
See this content in the original post

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!

See this content in the original post

⭐ Free Training: Squarespace CSS Basics

🔗 How to install CSS in one page on your Squarespace site