Je Header voorzien van een schaduw nadat je begint met scrollen? Het is mogelijk! Onlangs was ik op zoek naar een dergelijk effect voor een klant. Na wat speurwerk en het combineren van eerdere tutorial codes heb ik het volgende gevonden.
Stap 1
Bouw via de Elementor theme builder een header. Eenmaal in de Elementor editor is het belangrijk dat je jouw container (of je sectie) de HTML tag geeft van: Header. Vervolgens geef je de container ook nog de CSS-classes:sticky-header
Stap 2
Geef de container via Geavanceerd -> Bewegingseffecten het sticky effect TOP. Ook kan je hier aangeven of je de header sticky wilt hebben voor PC en mobiel of voor bijvoorbeeld alleen op de PC.
Stap 3
Nu de basis klaar staat is het tijd om de CSS code te gaan schrijven. In de vorige stap hebben we aangegeven dat de te schrijven CSS code alleen werkt op de classes sticky-header.
Voeg de volgende CSS code toe aan de container via Geavanceerd -> Custom CSS
header.sticky-header.elementor-sticky--effects {
box-shadow:0px 10px 10px 0px rgba(51,51,51,0.19);
}
In de bovenstaande code kun je spelen met de instellingen. De 0px, de 10px etc kun je aanpassen. Van links naar rechts geschreven zijn dit de opties:
Horizontal Length 0px
Vertical Length 10px
Blur Radius 10px
Spread 0px
rgba(51,51,51,0.19) is de kleur, deze kan je aanpassen naar eigen smaak.
Stap 4
Opslaan en afsluiten ;). Dit is het resultaat, een subtiele schaduw onder de header na het scrollen.
