Jump to content

Transparent Header, Fixed Scroll with Background

Recommended Posts

Posted

Hope someone can help.

I have a transparent header with white navigation options and  a video header background.

Once I start scrolling, I need the menu to become sticky and not transparent with a solid grey background. 

Posted

Can you share the website URL, page, and password (if applicable)? Thanks!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted

(In Squarespace 7.1) You should be able to set the header to fixed - basic and dynamic, which should achieve the look you want.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted
On 11/4/2022 at 1:03 PM, Ziggy said:

(In Squarespace 7.1) You should be able to set the header to fixed - basic and dynamic, which should achieve the look you want.

@Ziggy https://www.weareverb.co.uk/ pass: VERB (homepage)   So it's currently transparent on the header but as I scroll I want it to be sticky with a solid background on scrolling. 

Posted

Did you enable the setting as I suggested? Header -> fixed - basic and dynamic in header styles?

image.png.2eeac5a75d4f57640cca867ac6f85f90.png

image.png.4ec3bceed2564dec4ce5dc2ccaa12fe1.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted

No problem happy to help!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

  • 1 year later...
Posted

Hey there, I tried this and it worked but still have a few issues:

1. If there is a way to make the animation transition more gradual? It's quite choppy.

2. Can a very thin while line be added to the edge of the header? As found on this website https://www.mossy.earth (they use a black line for their white header but my header is a red colour so white is better for contrast).

3. Is there is a way to apply the same colour header to all pages regardless of section block background colour?

Posted
On 8/9/2024 at 4:43 PM, gearoid98 said:

Hey there, I tried this and it worked but still have a few issues:

1. If there is a way to make the animation transition more gradual? It's quite choppy.

2. Can a very thin while line be added to the edge of the header? As found on this website https://www.mossy.earth (they use a black line for their white header but my header is a red colour so white is better for contrast).

3. Is there is a way to apply the same colour header to all pages regardless of section block background colour?

What is your site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.