i'm trying to customize the "header blur background" setting so it starts at 100% transparency at top (full blur) to 0% transparency at bottom (no blur). Please advise. Thank you!
Try turning on the "Header Hide Until Needed" Animation Effect in the Salient Theme Options Panel -> Header Navigation Section so we can write up custom css for it.
Sorry for the late turn around, your ticket likely slipped through the cracks.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
all good, thanks for your quick response after I bumped the thread :)
i copy pasted that code into "Custom CSS Code" on the site, both with "Dynamic CSS to Inline in Head" setting enabled and disabled (and flushed the cache)
then tested it within the "Additional CSS" portion of "Customize" for standard Wordpress admin.
I tested both with "Header Hide Until Needed" enabled and disabled, based on earlier conversation
Results for all of the above combos the same: header becomes fully transparent, no blur visible (see "ATTACHMENT 1")
i also tested with "3px" instead of "0px" in the CSS, this results in a visible blur, but not with the gradient as discussed in the initial request (see "ATTACHMENT 2")
in the meantime, i've reverted the "Header Hide Until Needed" setting to enabled, and moved that snippet of code to Salient's Custom CSS box (with "0px" settings)
ahhh got it, thanks Tahir! it is working in the manner you described. think this was a matter of not clearly describing the desired functionality, and apologies for that.
i have attached a mockup of the functionality i'm talking about. basically, the header will always be blurry at the top of the header (including when it sticks to the top of page, not just at the "absolute top" of page), and then the header will always be fully transparent at the bottom. The mockup is not great but i think should demonstrate what i'm talking about!
Hi,
i'm trying to customize the "header blur background" setting so it starts at 100% transparency at top (full blur) to 0% transparency at bottom (no blur). Please advise. Thank you!
Hey ianbeerent,
Try turning on the "Header Hide Until Needed" Animation Effect in the Salient Theme Options Panel -> Header Navigation Section so we can write up custom css for it.
Thanks
ThemeNectar Support Team
awesome, thanks for your quick follow up, just enabled the setting!
hi @tahir any updates here? thank you!
tahir or anyone, any updates here? thank you?
Hey Again,
Sorry for the late turn around, your ticket likely slipped through the cracks.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
div#header-outer:not(.at-top) { -webkit-backdrop-filter: blur(0px) !important; backdrop-filter: blur(0px) !important; }Thanks
ThemeNectar Support Team
all good, thanks for your quick response after I bumped the thread :)
i copy pasted that code into "Custom CSS Code" on the site, both with "Dynamic CSS to Inline in Head" setting enabled and disabled (and flushed the cache)
in the meantime, i've reverted the "Header Hide Until Needed" setting to enabled, and moved that snippet of code to Salient's Custom CSS box (with "0px" settings)
please advise when you get the chance. thank you!
Hey Again,
I can see the CSS working as intended on my end in Chrome:
At the top of the page:
If scrolled down there is no blur:
Let me know if i understand this right ?.
Thanks
ThemeNectar Support Team
ahhh got it, thanks Tahir! it is working in the manner you described. think this was a matter of not clearly describing the desired functionality, and apologies for that.
i have attached a mockup of the functionality i'm talking about. basically, the header will always be blurry at the top of the header (including when it sticks to the top of page, not just at the "absolute top" of page), and then the header will always be fully transparent at the bottom. The mockup is not great but i think should demonstrate what i'm talking about!
thanks for your help!
also, i'm temporarily disabling this custom CSS to leave the header blurry consistently - let me know if it'd be helpful to put it back in place!
Hey Again,
I am afraid there is no such option to apply a blur in a gradient style.
Thanks
ThemeNectar Support Team