add gradient to background of top header - Sonora/Brine

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.

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:

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);
}

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

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);
}

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.

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.

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>

@bangank36 Yay!!! It looks so pretty and is exactly how I wanted it! look at how pretty it is!!  https://www.rachaelrenee.photos/ thank you so much!!!

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! 

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! 

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?