⭐️ April 2024 Tutorial Update:    • How to create a transparent header in...   ⭐️
- - -
If the first section of a page on your site has an image background, it’s super easy to make it visible underneath the header. Select edit site header, then click on style, then select dynamic and that’s it - you’re done!

But what if you have a banner list section? Or a gallery with rotating images?

For that to slide under your main navigation, you’ll need a little bit of CSS, and that’s exactly what you’ll learn how to create in this tutorial.

There are two creative ways to add this code to your site so be sure to watch the video before using the code below!

If you want to have this code work on every page on your website, add this to your Site Wide CSS file, found by navigating to Website → Website Tools → Custom CSS

.page-section:nth-child(1) {padding-top:0!important}

To create this effect for one page using site wide CSS, you need to get the collection id for the page. I use a free chrome extension to grab this info (not affiliated, just a fan! here is a link: https://insidethesquare.co/chromeext)

Update the code below for the specific page’s collection ID and paste this in your Site Wide CSS file, found by navigating to Website → Website Tools → Custom CSS
#colleciton-123456 .page-section:nth-child(1) {padding-top:0!important}
- - -
❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ https://buymeacoffee.com/insidethesquare
- - -
📑 Get access to my collection of CSS codes for Squarespace at https://insidethesquare.co/css
- - -
⭐ NEW: List of my top 7 FREE Squarespace tutorials: https://insidethesquare.co/top7
- - -
🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.
- - -
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM →   / thinkinsidethesquare  
👍 FACEBOOK →   / insidethesquare  
📌 PINTEREST →   / insidethesquare  
- - -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → https://insidethesquare.co/inside10
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥