How to create a transparent header in Squarespace // Image under navigation Squarespace
Вставка
- Опубліковано 3 жов 2024
- ⭐️ April 2024 Tutorial Update: • How to create a transp... ⭐️
- -
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: insidethesquar...)
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! ☕ buymeacoffee.c...
- -
📑 Get access to my collection of CSS codes for Squarespace at insidethesquar...
- -
⭐ NEW: List of my top 7 FREE Squarespace tutorials: insidethesquar...
- -
🙋 Need some help? Visit insidethesquar... to see my current support options.
- -
💻 WEBSITE → insidethesquar...
📧 NEWSLETTER → insidethesquar...
🤳 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 → insidethesquar...
- -
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 ♥
⭐ UPDATED VERSION: ua-cam.com/video/CJ--GbR3ww0/v-deo.html ⭐
This tutorial got a major update in April 2024 - check out the new version to learn how to make a transparent header in Squarespace 7.1
Excellent tutorial as always! thank you very much !
You’re so welcome! ☺️
Oh man, when I select 'Edit Site Header' I only see the option to Add Elements or Edit Design. Any ideas as to why I cannot see Style as an option? Thanks so much.
Rumor has it that Squarespace is making an update but you didn’t hear it from me! 😉😉 If you are using the new editor (which it sounds like you are!) click on Edit Design. Click on Color, select gradient, and set the opacity to 0. Then you can follow the steps to make it work for a list section just like the tutorial shows. Hope that helps and best of luck with your project!
Thank you
You're welcome ☺️
Thank you!
You're welcome! ☺️
Is there a way to make this only apply to widescreen and not mobile?
Great question! Technically you can isolate anything larger than a 641px breakpoint but it will still pull any background image behind a dynamic header. Here is that code if you wanna give it a try; hope it helps and best of luck with your project! @media only screen and (min-width:641px){.page-section:nth-child(1) {padding-top:0!important}}
thanks for this! i want this only applied to sections that contain specific blocks. so only if my first section has image blocks or video blocks. is that possible? if not, is there a way to exclude certain pages without using IDs?
actually i got it! here's the code i used for anyone else looking to do this:
.page-section:has(.sqs-block-image, .sqs-block-video):nth-child(1){padding-top:0!important}
Yay! Glad you made it work 🙌
thank you so much you are the best
You're welcome - happy to help! 😊
For some reason when I click "Edit Site Header" I only get "Edit Design" without the drop down box without Site Title & Logo, Elements, & Style?? Any idea what I'm overlooking? Thank you!
Great question! Squarespace made a change to their editor about a month ago, after this tutorial was released. (You can check out a video overview here: insidethesquare.co/header) This code can still work for you! I'm working on an update tutorial, but in the meantime, follow these steps & add this one extra line of code:
1. Click on edit site header
2. Click on edit design on the far right
3. On the design tab, select solid
4. Back in your CSS pnnel, add this code:
.header .header-dropshadow{opacity:0!important}
.header{background-color:transparent!important}
5. Follow the steps from this tutorial to raise the first page section so it sits behind your main navigation.
Hope that info helps and stay tuned for updated tutorials!
how can I do the same thing for the footer, because it is really bad not to be able to do this, I would like to have a transparent footer and a page that becomes adaptive on different screens, is it possible to do this via CSS? could you help me please?
Great question! A footer sites below the page in the HTML content tree, but if you add an image to the site wrapper you'll be able to place it behind everything. I'll add this tutorial to my to-do list; stay tuned for the full tutorial. If you wanna get started with the base code, here it is:
.site-wrapper {
background-image:url(image-url-here);
background-size: contain
}
.page-section .section-border, .page-section .section-background{
background:transparent!important;
background-color:transparent!important
}
You show posting the code into an empty box. I don't have an empty box on mine. When I put the code in nothing happens. Where should I put the code in the CSS code box?
Enter a new line on your CSS! I have over 300 lines of code on insidethesquare.co 😎
is there a way to do this for not just the first section but the entire site?
You can set the header to fixed so it will stay at the top of the page no matter how far down you scroll. Hope that info helps and bets of luck with your project!