Budujesz stronę z sekcjami do których linkujesz przez ID. Klikasz link w menu — strona przewija się do właściwej sekcji, ale nagłówek przyklejony do góry ekranu zasłania jej początek. Zamiast tytułu sekcji widzisz połowę drugiego akapitu.
Klasyczny problem ze sticky headerem. Na szczęście rozwiązanie jest proste.
Dlaczego tak się dzieje
Kiedy przeglądarka przewija stronę do kotwicy — elementu z konkretnym ID — ustawia go dokładnie przy górnej krawędzi okna. Nie wie że masz sticky header który zajmuje 80 czy 100 pikseli przestrzeni. Efekt: nagłówek przykrywa górę sekcji.
Rozwiązanie — scroll-margin-top
Właściwość CSS scroll-margin-top mówi przeglądarce żeby przy przewijaniu do kotwicy zostawiła określony margines od góry. Dokładnie tyle ile wynosi wysokość Twojego sticky headera.
Wejdź w Divi → Theme Options → Custom CSS albo w opcje niestandardowego CSS w Divi Builderze i dodaj:
section[id] {
scroll-margin-top: 90px;
}Zamień 90px na rzeczywistą wysokość Twojego nagłówka. Nie wiesz ile wynosi? Otwórz DevTools w przeglądarce (F12), kliknij na nagłówek i sprawdź jego wysokość w zakładce Computed.
Jeśli masz różne wysokości na różnych urządzeniach
Sticky header na telefonie jest często niższy niż na desktopie. Warto to uwzględnić:
section[id] {
scroll-margin-top: 90px;
}
@media (max-width: 768px) {
section[id] {
scroll-margin-top: 60px;
}
}Dostosuj wartości do swoich breakpointów i wysokości nagłówka na każdym urządzeniu.
Alternatywa — przez ustawienia sekcji w Divi 5
Jeśli nie chcesz pisać CSS, możesz to rozwiązać bezpośrednio w builderze.
Wejdź w ustawienia każdej sekcji która jest kotwicą → zakładka Advanced → Scroll Offset. Wpisz wartość offsetu w pikselach — tyle ile wynosi wysokość Twojego nagłówka.
Minus tej metody to to, że musisz ustawić to dla każdej sekcji osobno. Rozwiązanie CSS działa globalnie dla wszystkich kotwic na raz.
Sprawdź efekt
Po dodaniu CSS zapisz i przetestuj kilka linków kotwicowych na stronie — zarówno na desktopie jak i na telefonie. Jeśli offset jest za mały lub za duży, popraw wartość w CSS.
