Gradiant to transparent Sticky Header

You can use “background-image: linear-gradient” for that.

=> https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

=> https://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans

no one hampers you to have an opacity of 0.001 ;)
see here with predefined color to transparent : Gradient Tool
f.e:

#top .av_header_transparency .header_bg {
    background-image: -ms-linear-gradient(bottom,rgba(255,255,255,0.001) 0%,rgba(255,255,255,1) 45%);
    background-image: -moz-linear-gradient(bottom,rgba(255,255,255,0.001) 0%,rgba(255,255,255,1) 45%);
    background-image: -o-linear-gradient(bottom,rgba(255,255,255,0.001) 0%,rgba(255,255,255,1) 45%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,rgba(255,255,255,0.001)),color-stop(45,rgba(255,255,255,1)));
    background-image: -webkit-linear-gradient(bottom,rgba(255,255,255,0.001) 0%,rgba(255,255,255,1) 45%);
    background-image: linear-gradient(to top,rgba(255,255,255,0.001) 0%,rgba(255,255,255,1) 45%);
    background-color: transparent !important;
}

for detailed advices i had to see the corresponding site.

• This reply was modified 5 years, 9 months ago by Guenni007.

It does work in up to date browsers … as shown in the links i posted before.
I checked it in Chrome and Firefox.

try this, light gray to transparent:

background-image: linear-gradient(to top, rgba(220,220,220,0), rgba(220,220,220,1));

Edit:
Make sure you don’t use any background-color or css-filter together with it.

• This reply was modified 5 years, 9 months ago by cg.

Without seeing the actual site and its HTML and CSS i cannot suggest specific CSS-snippets for you. If you want, you can post a link to the page in question to a comment so i can have a look. I can’t see private content as i am not a moderator or developer from Enfold/Kriesi.

To “disable” the background-color of the element which may be inserted by the theme you can use this for the element with the gradient and maybe for some element between it and the page content too:

background-color: transparent !important;

A link to the page would be enough … no login needed as long as there is no pass-protection on the overal site itself … better you remove the login-info. :-)

OK … i can see the page now.

At first: You should consider to use the “transparent header” option for pages where you want the header/navi to overlay the content (Docs: https://kriesi.at/documentation/enfold/header/).
Because when you use the standard configuration (normal header) the content itself is pushed downwards … resulting in a not seeable transparency because there is nothing below the header. But this depends on the overall concept … e.g. if you need this setting elsewhere.

In the following i will work with your settings as is … and for that pull the content back to top so there “is something” to overlay.

Quick-CSS to pull up the content:

.html_header_top.html_header_sticky #top #wrap_all #main {
  padding-top: 0 !important;
}

Now to eliminate the theme header bg-color:

.header_color .header_bg {
  background-color: transparent !important;
}

From this point on you can experiment with your settings/adjustments of the transparency gradiant.

Does that help? Do you need further assistance?

You could also consider to use a white or gray “box shadow” from the header into the slider-images.

=> https://www.w3schools.com/CSS/tryit.asp?filename=trycss3_box-shadow3

=> https://kriesi.at/support/topic/sticky-header-shadow/

Or use images with more space at the top, so no important parts of them are hidden by the header.

It’s now more a question of the stylistic concept how to use the transparency or shadow.

—–
Edit:
Not sure if that lies in your responsibility, but i think the dentist needs a better logo …
The current one does not work because of its dimensions / proportions … also not because of the colouring / inverse look (obviously you can’t make the teeth graphic gray or dark as a dentist, but you also don’t want to use a whole dark area for backgrounds … dentists are clean, bright and white) … and last but not least the font used for the logo is a “No-Go” (is it ‘Bank Gothic’ ?) …

• This reply was modified 5 years, 9 months ago by cg.