How to make your header transparent in both versions of Squarespace

 
transparent header.png
 
 

hey you! over here!

This post contains info for both Squarespace 7.0 and 7.1.

Skip ahead to see your relevant instructions!

 

Don’t know which version you have? Here’s a quick cheat to find out: 

When you log into your website on Squarespace, there will be an arrow at the top of the page that you can click for a full-screen view.

If the arrow is in the top-left corner, you have Squarespace 7.0.

If the arrow is in the top-right corner, you’re using version 7.1!

Oh, and if you haven’t purchased your Squarespace subscription yet, feel free to use my code BEJ10 for 10% off.

 

Now on to the tutorial 🙂

Depending on which template you start with in Squarespace; your logo, navigation menu, and other elements may have a solid background color; or they may sit right on top of a photo. 

Here’s a comparison:

Transparent header turned off:

solid nav bar sample 3.jpg

Transparent header turned on:

transparent nav bar sample 3.jpg

If you want to switch up these style settings, here’s where you can find them!

how to make your navigation header transparent in squarespace 7.0

Note: This is only an option for templates in the Brine family and the Bedford family. Those are two of the most flexible templates in terms of design capabilities, so they’re what I typically recommend.

If you have a different template from version 7.0 and wanna change to a Brine or Bedford template, here’s how you can switch over!


Instructions for the Brine family of templates, including the following:

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template (discontinued), Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln (discontinued), Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

One: In the Home side panel, go to Design > Site Styles

(If you are using an index gallery at the top of your page, do steps 2 through 5. Otherwise, skip to step 4!)

Two: Scroll to the “Index: Gallery” tweak

Three: Select “Overlay Header on First Index Gallery”

Four: Then scroll to the “Header: Layout” tweak

Five: Change the position to “Bottom” for any of the following options you’d like: Branding, Primary Nav, Cart, and Search

Done! Save your changes.

This will make the header transparent on top of a single full-screen image, a slideshow, a gif, or a video.



Instructions for the Bedford family of templates, including the following:

Anya, Bedford, Bryant, Hayden

One: In the Home side panel, go to Design > Site Styles

Two: Scroll to the “Site Header” tweak

Three: Select “Transparent on Banner Images”

Done! Save your changes.

This will make the header transparent on top of a single full-screen image, a slideshow, a gif, or a video.

how to make your navigation header transparent in squarespace 7.1

Instructions for ALL the templates in the most recent version of SQSP.

One: Click Edit on any page

Two: Click the “Edit Site Header” button

Three: In the pop-up, select Style

Four: From the dropdown menu, select “Dynamic”

Done! Save your changes.

This will make the header transparent on top of a single full-screen image, a gif, or a video.

Sadly, you can’t have a full-screen slideshow behind a transparent nav bar in 7.1. So if you wanted to hack it, you could upload a slideshow to YouTube or Vimeo (or create a gif with photos!) and set that as the background media instead. 😉

Have fun customizing your site to your heart’s content!

 

Btw, I got more Squarespace tricks up my sleeve right here:

Emily Jane

I’m a photographer-turned-web-designer, running a business since 2016. In my eyes, life is a short gift. You should be able to relax & enjoy it, but you gotta make money to do that. Enter your money making machine: Your website.

Your website should be making your life easier, not harder! I help take the headache out of websites so busy creatives like you move on to your next big goal :)

https://byemilyjane.com
Previous
Previous

5 Steps for seeing more progress in your business

Next
Next

Alternatives to the blog sidebar feature in Squarespace 7.1