How to make your header transparent in both versions of Squarespace
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:
Transparent header turned on:
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!
