Problemstilling:
På min WordPress/Elementor-hjemmeside bruger jeg menuankerlinks til at navigere til specifikke sektioner på siden. Når jeg klikker på et sådant link, scroller siden helt op til ankerets top, men indholdet bliver delvist skjult under en sticky header. Hvordan kan jeg justere scrollpositionen, så linket stopper før skærmkanten og ikke bliver dækket af headeren?
CSS kode
html {
scroll-padding-top: 120px;
}
Her bruges koden:
Koden indsættes fx i temaet:
Udseende → Tilpas → Ekstra CSS
Tallet 120 justeres efter dit aktuelle behov.
CSS kode
@media (min-width: 1024px) {
html {
scroll-padding-top: 120px;
}
}
Responsiv kode:
Hvis din header kun er sticky på desktop, så kan du lave det responsivt med koden til venstre.
@media betyder at den kun er aktiv, hvis skærmbredden er minimun 105 pixels.
CSS kode
html {
scroll-padding-top: 80px;
}
@media (min-width: 1024px) {
html {
scroll-padding-top: 120px;
}
}
Responsiv kode:
Hvis headeren er mindre på mobil
Fx 120px på desktop og 80px på mobil:
Læs CSS
W3Schools er en populær online læringsplatform, der tilbyder omfattende og letforståelige tutorials, referencer og eksempler inden for webudvikling, herunder HTML, CSS, JavaScript og meget mere. Det er et godt sted for både begyndere og erfarne udviklere til hurtigt at finde information og kodeeksempler.
Her er et link til W3Schools’ side om CSS-egenskaben scroll-padding-top, som bruges til at justere den indvendige afstand ved scrollning i et element:
Læs mere på w3scholls.com
Læs mere om “elementor menuankerlink” på Elementors egen hjemmeside, www.elementor.com. Kig i deres helpcenter.
Brug for hjælp
Har du brug for hjælp til din WordPress hjemmeside, så kontakt os gerne.