Guest Posted April 1, 2020 Share Posted April 1, 2020 Site URL: https://silver-porcupine-gp5t.squarespace.com Hello Squarespace Community, I am building a site using version 7.1 and am very close to finishing it! One of my last orders of business is to add a gradient to the navigation bar. The catch is that I want the nav bar to be transparent at the top of the page and then the gradient to show up when you start scrolling on the page. The gradient should fade from orange (#FF8700) on the left to bright yellow on the right (#F7FF00). Any help is much appreciated! Link to comment
tuanphan Posted April 4, 2020 Share Posted April 4, 2020 Have you solved yet? If not, can you setup password & share url? Your site is private. 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!) Link to comment
Guest Posted April 5, 2020 Share Posted April 5, 2020 No haven't solved it yet. The URL is https://silver-porcupine-gp5t.squarespace.com Password is dowdy1234 Link to comment
derricksrandomviews Posted April 5, 2020 Share Posted April 5, 2020 https://heathertovey.com/blog/gradient-backgrounds/ read the whole lesson, the comments have code for changing banners, and headers to be gradient. Link to comment
tuanphan Posted April 6, 2020 Share Posted April 6, 2020 9 hours ago, brlawson said: No haven't solved it yet. The URL is https://silver-porcupine-gp5t.squarespace.com Password is dowdy1234 Add to Home > Design > Custom CSS .header-announcement-bar-wrapper.bright.shrink { background-image: linear-gradient(to right, #FF8700, #F7FF00); } 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!) Link to comment
Guest Posted April 10, 2020 Share Posted April 10, 2020 @tuanphan I pasted the code in the Custom CSS field and it works great, but only on the homepage. How do I apply the effect site wide? Thanks! Link to comment
tuanphan Posted April 10, 2020 Share Posted April 10, 2020 1 minute ago, brlawson said: @tuanphan I pasted the code in the Custom CSS field and it works great, but only on the homepage. How do I apply the effect site wide? Thanks! try .header-announcement-bar-wrapper.shrink { background-image: linear-gradient(to right, #FF8700, #F7FF00); } 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!) Link to comment
Lou_90_ Posted September 1, 2021 Share Posted September 1, 2021 This is awesome. Is there a way to make the bottom part of the gradient transparent like this site? I can't work it out. Thanks! https://theprincesstheatre.com.au/ Link to comment
Lou_90_ Posted September 1, 2021 Share Posted September 1, 2021 Don't worry, got it! It's not as smooth as the example site but it works! .header-announcement-bar-wrapper { background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1)); } Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.