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:

			

                

                    

                        

                        

                        

                    
                    

                        
                        Kopieer de Code!
                        Gekopieerd!
                        Use a different Browser
                    
                
                
                    
@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?