Sticky header w Divi — przewodnik krok po kroku
Sticky header (przyklejony nagłówek) to nagłówek, który zawsze pozostaje widoczny na górze ekranu, niezależnie od pozycji scrolla. Świetnie wpływa na UX — użytkownik zawsze ma dostęp do menu. W Divi możesz go skonfigurować na kilka sposobów.
Sposób 1: Wbudowane Sticky Position w Divi
Od wersji Divi 4.6 sticky pozycje są wbudowane. W edytorze Divi otwórz sekcję nagłówka, przejdź do Advanced → Position → Sticky Position → Stick to Top. To wszystko.
Sposób 2: Theme Builder + Position Sticky
Jeśli używasz Theme Buildera (Divi → Theme Builder), edytuj globalny header i włącz Sticky Position dla całej sekcji. Możesz też skonfigurować różne wyglądy dla stanu pre-sticky i sticky (zmienić kolor, wysokość, logo).
Sposób 3: Wtyczka Divi Pixel — Sticky Header z transformacją
Divi Pixel oferuje zaawansowane sticky header, które potrafi: zmieniać kolor po scroll, kurczyć się przy scrollu, zmieniać logo, ukrywać przy scroll-down i pokazywać przy scroll-up.
Najczęstsze problemy
Header przykrywa pierwszą sekcję — dodaj padding-top do pierwszej sekcji wynoszący wysokość headera.
Sticky nie działa na mobile — sprawdź ustawienia Sticky Position dla widoku Phone.
Sticky „miga” przy scroll — wyłącz CSS animations dla sticky, sprawdź konflikty z innymi wtyczkami.
