How To Create A Transparent 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
Transparent headers are a hot design trend, adding a clean and modern touch to your website. But how do you achieve this look in Squarespace? This free Squarespace tutorial will show you both the easy way, and the code-savvy ways to create a stunning transparent header.
In this step by step tutorial, you'll see the two options we have to work with:
The Built-in Option: Learn how to utilize Squarespace's native settings for a quick and easy transparent header implementation. (Spoiler alert: it's just a few clicks!)
Custom Code Magic: If you have an auto layout as your first page section, you'll need to use simple CSS code to get a transparent header. Whether you're a coding newbie or a Squarespace pro, this tutorial walks you through the process with clear instructions and a helpful screen share so you can see exactly where to add this code and how to use it.
Video tutorial
Code Example
Here is the code from this tutorial. Make sure you update the collection ID for your specific page using the free Chrome extension listed below:
#collection-123456 .page-section:nth-child(1) {
padding-top:0!important
}
