Als je de standaar menubalk van Divi gebruikt, dan blijft die mooi in beeld terwijl je door je pagina heen scrollt. Als je ervoor kiest om je eigen custom menu te maken, met de Divi Builder, dan blijft je menu niet standaard staan. Een van de coaches waar ik mee samenwerk, adviseert haar klanten om het menu en de social media buttons altijd zichtbaar te hebben voor de bezoekers op je website.
In dat kader wil je graag een sticky menu hebben. Dat kun je ook realiseren met Divi Builder in een paar simpele stappen.
Stap 1: Bouw je header in 1 sectie
Alles waarvan je wilt dat het zichtbaar blijft tijdens het scrollen over je pagina, plaats je in 1 sectie. Op deze website heb ik ervoor gekozen om een menu met logo en social media buttons zichtbaar te houden tijdens het scrollen.
Als je klaar bent met alles wat je in je header wilt hebben, sla je alles op.
Stap 2: CSS ID & Klasse
Ga vervolgens naar het tabblad geavanceerd van je sectie-instellingen en klik op CSS-id & klasses.
Vul vervolgens in bij CSS-ID: main-header
En bij CSS-klasse: et-fixed-header
Zie onderstaande afbeelding:
Sla alle wijzigingen op en verlaat de Themabouwer.
Stap 3: CSS code
Ga vervolgens naar Divi – Thema opties – Algemeen
Scroll naar beneden totdat je bij de aangepaste CSS komt. In het zwarte vlak kopieer je de volgende code:
@media only screen and (min-width: 981px) {
main-header.et-fixed-header {
position: fixed;
padding-top:30px;
}
page-container {
padding-top:150px;
}
}
Sla op en bekijk het resultaat.
Stap 4: Hoogte aanpassen
Nu is het belangrijk om te kijken naar de hoogte van je header. Op deze website is de hoogte 150px, maar misschien is hij bij jou hoger of lager. Je kunt dus de padding-top hoogte aanpassen op jouw eigen header.
Dat is het. Ik wens je veel plezier met je sticky header. Laat je me weten hoe die van jou gelukt is?
0 reacties