Header fall down

Hi Stilecatalini,

The customization that you would like to have requires a significant amount of time to do the modifications as Ismael mentioned.
Please check the scope of our support: https://kriesi.at/support/register/#av_section_2

Best regards,
Nikko

Hi Stilecatalini,

Is it possible to have a little shadow under the transparent header bar?
Please add this CSS code:

#header {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

Is it possible to have an overlay (all the words/buttons) little transparent instead of full black?
I think it’s possible, but the CSS code may depend on the current settings, the link you posted doesn’t seem to be using Enfold and we’d like to inspect it, to make sure the code is accurate.

Best regards,
Nikko

Hi Stilecatalini,

Thanks for the login credentials, is the link in private content the correct site? if not, please add the login page link as well.

Best regards,
Nikko

Hi Stilecatalini,

Thanks, I have checked it and the header overlay uses transparency, are you referring to the header? or is it other element like a Color Section? if it’s the color section then there’s an option for Overlay Opacity.

Best regards,
Nikko

Hi Stilecatalini,

Thanks for the screenshot, for the overlay, please add this CSS code in Quick CSS:

.html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul a:hover {
    background-color: rgba(0,0,0,0.3);
}

just adjust the opacity value 0.3 to increase or decrease transparency.

As for the shadow, I can’t seem to see the shadow when the header goes up and hidden, can you provide a screenshot on how it looks on your end?

Best regards,
Nikko

Hi Stilecatalini,

Please try adding this CSS code:

#header.av_header_transparency {
    box-shadow: none !important;
}

Hope it helps.

Best regards,
Nikko

Hi Stilecatalini,

I think it’s possible but it’s beyond our scope as a support since it would take a lot of time for creating and testing it.

Best regards,
Nikko

Hi Stilecatalini,

We are trying to help you as much and I actually tried to make a solution of what you asked on my end but the level of complexity of what you are trying to achieve would take a lot of time for my skill level and also beyond the scope of our support.

Best regards,
Nikko

Hi Stilecatalini,

I found a simpler solution which does not require much coding, please try to add this CSS code and see if it helps:

.html_av-overlay-side .av-burger-overlay-scroll {
    transform: translate(0, -100vh);
}

.html_av-overlay-side.av-burger-overlay-active-delayed .av-burger-overlay-scroll {
    transform: translate(0, 0);
}

Best regards,
Nikko

Hi Stilecatalini,

I apologize I did not know that was already suggested but it’s the simplest form we can achieve that, I guess javascript is the only way we could achieve that type of animation and unfortunately, would take much time.

Best regards,
Nikko

Hi Stilecatalini,

Thanks as well for using Enfold and for your patience.
Have a great day!

Best regards,
Nikko