How to create a transparent header navigation bar on one page only (Squarespace 7.1)

Squarespace includes many built-in options for your header/navigation bar, however these options are universal — meaning they are applied site wide.

Implementing a transparent navigation on a webpage can be a design choice that serves both aesthetic and functional purposes.

In this simple yet impactful tutorial we walk you through how to add a transparent navigation to select pages of your website.

5 simple steps:

1. From your Squarespace dashboard, go to “Website” and navigate to the page you'd like to update

2. Click on the cogwheel to the right of the page name

3. In the page settings popup, navigate to “Advanced”

4. Copy & paste the code below

<style>
  header#header {
    position: absolute !important;
    background: transparent;
}
</style>

5. Save & refresh!

Note: you can apply this code to as many pages on your website as you’d like!

Thanks for reading!

Did this tutorial help? Consider buying me a coffee as thanks! 🥰

Use discount code STYLEDSQUARE10 to save 10% off your Squarespace Subscription!

* Disclaimer: This post contains affiliate links. If you purchase through our links, we may earn a small commission at no extra cost to you. We only ever recommend tools we genuinely use and love.

More Squarespace tutorials

Blog