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.
Pobierz Divi -10% →
Powiązane
Jak zrobić sticky header w Divi?
Divi ma wbudowaną opcję przyklejanego nagłówka. Jeśli używasz Theme Buildera, edytuj szablon nagłówka, zaznacz sekcję i w zakładce zaawansowanej włącz „Sticky Position” → „Stick to Top”. Możesz ustawić różne style dla stanu przyklejonego (mniejsze logo, inne tło), co poprawia estetykę przy przewijaniu.
Sticky header bez Theme Buildera
Na starszych konfiguracjach Divi sticky header ustawisz przez Theme Customizer (Header & Navigation → Header Format → Fixed Navigation Bar). To prostsze, ale daje mniej kontroli nad wyglądem. Dla pełnej swobody zalecany jest Theme Builder z opcjami Sticky na poziomie sekcji.
Najczęstsze problemy ze sticky header
- Zasłanianie treści — przyklejony nagłówek może zakrywać kotwice; dodaj scroll-margin-top.
- Za duży nagłówek na mobile — zmniejsz logo i padding w stanie sticky.
- Migotanie przy przewijaniu — wyłącz konflikty z innymi wtyczkami do nagłówka.
Sticky header a wydajność i UX
Przyklejony nagłówek poprawia nawigację i CTR wewnętrznych linków, ale na telefonach zabiera cenne miejsce. Rozważ ukrywanie go przy przewijaniu w dół i pokazywanie przy przewijaniu w górę. Testuj na realnych urządzeniach, by menu nie przeszkadzało w czytaniu.
Animacje i style sticky header
Divi pozwala ustawić inne style dla stanu przyklejonego: mniejsze logo, zmienione tło, inny kolor tekstu. Płynne przejście (transition) między stanem normalnym a sticky wygląda profesjonalnie. Unikaj jednak zbyt drastycznych zmian wysokości, które powodują „skakanie” treści przy przewijaniu.
Sticky header a kotwice i nawigacja
Gdy używasz linków kotwiczących (przewijanie do sekcji na stronie), przyklejony nagłówek zasłania początek sekcji. Rozwiąż to, dodając scroll-margin-top do elementów docelowych równy wysokości nagłówka. Dzięki temu kliknięcie w menu przewija stronę do właściwego miejsca, a nie pod nagłówek.
Wydajność sticky header
Sticky position w Divi działa na czystym CSS, więc nie obciąża strony. Problemy z płynnością wynikają zwykle z ciężkich elementów w nagłówku (duże logo, widżety) lub konfliktów z innymi wtyczkami. Trzymaj nagłówek lekki, a przewijanie pozostanie płynne nawet na słabszych urządzeniach.
