7.1 Fixed Navigation on scroll - how can I style this?

holahannah · April 6, 2023

Hello!

I've got fixed navigation enabled on my site. Basically when you start to scroll down the page, I want the fixed navigation background to be a transparent gradient (screenshot attached) rather than a solid white colour. Does anyone know how I can change this?

Similarly, when I start scrolling, there is a little jump/not so smooth scroll as I start scrolling down the page. Is there any way to remove this? Video attached for reference.
https://www.loom.com/share/122ed33b949045dca1b1dd9f3c0d9247

https://pumpkin-algae-cgck.squarespace.com/
password: mayah

Any help greatly appreciated. Thank you!

tuanphan · April 8, 2023

Add to Design > Custom CSS

header#header.shrink {
    background-image: linear-gradient(to bottom, rgba(255,255,255,0) , rgba(255,255,255,3)) !important;
    background-color: transparent !important;
}

holahannah · April 8, 2023

Brilliant, that worked! I just changed the linear gradient "to top" to switch the direction.
Thanks for your help!

7.1 Fixed Navigation on scroll - how can I style this?

Recommended Posts

holahannah

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

tuanphan

Link to comment

holahannah

Link to comment

Create an account or sign in to comment

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources