How to create a transparent header in Squarespace // Simple tutorial to use an image under your menu

Подписаться 25 тыс.

Просмотров 1,5 тыс.

50% 1

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.
- - -
This tutorial was updated in 2024 and features the new header menu options. To learn more about this feature, visit insidethesquare.co/header
- - -
Want to add a background image to the header and only the header? Check out this tutorial: insidethesquare.co/squarespac...
- - -
In this step by step tutorial, you'll see the two options we have to work with:
00:41 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!)
02:33 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.
4:00 If you're option two and have an auto layout as your first page section, here is a link to the chrome extension I use in the video. Not affiliated, just a fan: insidethesquare.co/chromeext
Here is the code from this tutorial. Make sure you update the collection ID for your specific page using the free Chrome extension I listed above:
#collection-123456 .page-section:nth-child(1) {
padding-top:0!important
}
Related Content You'll Probably Love:
🎨 Free guide to creating colors with code: insidethesquare.co/colors
📑 My personal collection of CSS codes for Squarespace: insidethesquare.co/css
❤️ Like this tutorial? BuyMeACoffee to say thanks: buymeacoffee.com/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 → 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 ♥

Опубликовано:

8 апр 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 13

@bethfriends 14 дней назад

OMG thank you so much!!

@InsideTheSquare 13 дней назад

You're so welcome; happy to help! :)

@JamesBefurt Месяц назад

Great tutorial! Thanks!

@InsideTheSquare Месяц назад

You're welcome - glad you enjoyed it! 🥰

@eugeneekuban7415 2 месяца назад

Hey, thank you so much for this, I'm trying to create a transparent background but adaptive so the text colour changes on different pages. Do you know how to do that?

@InsideTheSquare 2 месяца назад

Great question! Setting it to adaptive should be all you need to do - the background color will be used if the first page section doesn't have an image, otherwise it will be a transparent overlay on top of the page section background image.

@emilyeidman 3 месяца назад

Hey! I'm getting it to work on my main page on desktop but it's not showing up on mobile. Any idea how to fix that?

@InsideTheSquare 2 месяца назад

Nope - this code isn't device specific, and my demo site shows it working fine on mobile 🤷‍♀ If you wanna send me a link I can see what code might be making yours messed up; email me directly: support-at-insidethesquare.co

@adrianvanderlee5236 2 месяца назад

This is exactly what I want for my website but it's just not working for me. When I paste in your code and remove your collection number, absolutely nothing happens. I've got my collection number from the Chrome extension and pasted that in in front of the code, but still nothing. The first section below the header on my home page is a gallery of 10 of my favourite photos - perhaps this doesn't work with galleries? Thanks.

@InsideTheSquare 2 месяца назад

It’s hard to say without seeing your code but yes, this works for any page section type. Make sure you have also set up the correct header design settings. Check out the troubleshooting tips at insidethesquare.co/code-help

@adrianvanderlee5236 2 месяца назад

@@InsideTheSquare Well spotted - background colour transparency was still at 100%! Working great now, thank you.

@anthonyalmeidatattoo 2 месяца назад

Hi, using this code #collection-123456 .page-section:nth-child(1) { padding-top:0!important } on my home page and it doesn't seem to work. Is it because I am using sticky nav code blocks on my other pages? Is there a way around this? I'm trying to make my home page have the transparent navigation and the rest have a solid sticky navigation.

@InsideTheSquare 2 месяца назад

You need to replace the example “#collection-123456” with your own collection id. In the video you’ll see how to use the chrome extension to grab that info; extension link is in the description.