How to create a transparent header navigation bar on one page only (Squarespace 7.1)
Pin to save for later
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!
All set!
USE DISCOUNT CODE STYLEDSQUARE10 TO SAVE 10% OFF YOUR SQUARESPACE SUBSCRIPTION
* Disclaimer: This post contains affiliate links. We may earn a commission should you chose to sign up for Squarespace using our link. Affiliate links are a great way to show your support for our content with no additional cost to you!
