5.0 dankzij 28 reviews

Google-logo-225-225.png

Sticky Elementor Header voorzien van schaduw

Home » Kennisbank » Elementor Pro » Sticky Elementor Header voorzien van schaduw

In dit bericht:

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 1, geef de container de html tag HEADER
Stap 2, geef de container 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.

0 interessant

Picture of Rick Memelink
Rick Memelink
Rick is eigenaar van Websitetoday.nl. Hij ontwikkelt WordPress websites met Elementor en heeft een achtergrond als sportleraar. De afgelopen jaren heeft hij veel cursussen en trainingen gevolgd in online marketing, webdesign en ondernemen. De vreemde combinatie van sport, lesgeven en webdesign maakt dat Rick een bijzondere 'kijk' heeft ontwikkeld op het realiseren van een nieuwe websites voor jou!
WhatsApp openen
1
💬 Heb je een vraag?
App met Rick van Websitetoday
Hallo 👋
Heb je een vraag over Sticky Elementor Header voorzien van schaduw? Of kan ik je ergens bij helpen?
Wil je een offerte aanvragen of heb je vragen over onze prijzen? Vul aub. dit formulier in en ik help je graag verder!