Jump to content

add gradient to background of top header - Sonora/Brine

Recommended Posts

Site URL: http://www.rachaelrenee.photos

 

Hi Im using the sonora template of the Brine family for a total redesign of my site. I want to add a gradient from white to transparent to the top header so that it flows smoothly into the image below but my navigation doesnt get lost in the image. I've been trying to figure out the code and sort of got it but then couldn't get it to apply to the header (it was applying to the image below the header), then I made a bunch of rushed attempts at changing it and lost the code i had and none of it now works. Thanks in advance for suggestions on how to apply a gradient - white to transparent - to the header section that has my nav bar and logo. Thanks so much.

Link to comment
2 hours ago, mayflyaway said:

Site URL: http://www.rachaelrenee.photos

 

Hi Im using the sonora template of the Brine family for a total redesign of my site. I want to add a gradient from white to transparent to the top header so that it flows smoothly into the image below but my navigation doesnt get lost in the image. I've been trying to figure out the code and sort of got it but then couldn't get it to apply to the header (it was applying to the image below the header), then I made a bunch of rushed attempts at changing it and lost the code i had and none of it now works. Thanks in advance for suggestions on how to apply a gradient - white to transparent - to the header section that has my nav bar and logo. Thanks so much.

I would suggest a solution like:

image.thumb.png.61528dbea89db8ea4688575b10418ce9.png

To add CSS, go to Design -> Custom CSS

.enable-load-effects .Index-page-image.loaded {
	top: -60px;
}
.Header.Header--top {
    background: rgb(255,255,255);
	background: -moz-linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 51%, rgba(0,212,255,0) 100%);
	background: -webkit-linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 51%, rgba(0,212,255,0) 100%);
	background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 51%, rgba(0,212,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#00d4ff",GradientType=1);
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
4 hours ago, mayflyaway said:

hi @bangank36

That looks like exactly the solution I need but when I copy/paste the text into custom CSS and save it... nothing changes

HI sorry I was missed this

.enable-load-effects .Index-page-image.loaded {
	 top: -60px;
}
.tweak-overlay-parallax-enabled .Parallax-item {
    overflow: visible;
}
.Header.Header--top {
    background: rgb(255,255,255);
	background: -moz-linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 51%, rgba(0,212,255,0) 100%);
	background: -webkit-linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 51%, rgba(0,212,255,0) 100%);
	background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 51%, rgba(0,212,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#00d4ff",GradientType=1);
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

so close... is there any way to get it to not have a sharp delineation where the solid and the gradient meet? I was trying different numbers in different places but maybe you know how to fix it?
The custom css editor is bugging out on me right now and not showing changes that i make, so I am having to save and reload my live site in order to see changes, which makes futzing around more of a pain in the buttocks.

Screen Shot 2020-08-04 at 11.11.07 AM.png

Link to comment
2 hours ago, mayflyaway said:

oh! Also it looks like it is applying to all pages - I only need it on the Index page because the menu is on top of a photo, which disrupts the visibility of the menu. The other pages don't have this issue and id like them to function as they normally do.

For a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced
 

<style>
  .enable-load-effects .Index-page-image.loaded {
	 top: -60px;
}
.tweak-overlay-parallax-enabled .Parallax-item {
    overflow: visible;
}
.Header.Header--top {
    background: rgb(255,255,255);
	background: -moz-linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 51%, rgba(0,212,255,0) 100%);
	background: -webkit-linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 51%, rgba(0,212,255,0) 100%);
	background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 51%, rgba(0,212,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#00d4ff",GradientType=1);
}
</style>

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 year later...
4 hours ago, ryansatyr said:

Hi @bangank36

Thank you for this code. I was trying to use it for my website but it fussed with all the index pages I had set up here: https://www.ryansatyr.com/singles

I would like to keep the parallax and the vh of the banners. 

Could you please help me out? 

Would appreciate your help! 

image.thumb.png.a7bdb06f56e6432de7614a6b7d7f05d1.png

This is the result when apply the following code

.Header.Header--top {
  background: rgb(255,255,255);
  background: -moz-linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 51%, rgba(0,212,255,0) 100%);
  background: -webkit-linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 51%, rgba(0,212,255,0) 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 51%, rgba(0,212,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#00d4ff",GradientType=1);
}

So it still does not meet your requirement, does it?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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.