Problemy z headerem w WordPress – sticky, menu i nawigacja – jak naprawić

Problemy z nagłówkiem strony WordPress dzielą się na trzy kategorie: problemy ze sticky header (header nie przykleja się do góry ekranu przy scrollowaniu), problemy z menu (nie wyświetla się, nie działa na mobile, podmenu się nie otwiera) i problemy z pozycjonowaniem (header nakłada się na treść, znika po scrollowaniu, ma złe rozmiary). W WordPress 6.x pojawiła się dodatkowa komplikacja – block themes (Full Site Editing) obsługują header inaczej niż klasyczne motywy, co generuje nowe, specyficzne problemy. Pierwsza rzecz do ustalenia: czy Twój motyw to block theme (np. Twenty Twenty-Five) czy klasyczny motyw (Astra, GeneratePress, Divi). Od tego zależy, gdzie szukać ustawień i jakie rozwiązania zastosować.

Sticky header to nagłówek, który zostaje u góry ekranu gdy użytkownik scrolluje stronę w dół. Poprawia nawigację i konwersję, bo użytkownicy mają stały dostęp do menu i CTA. Tylko zmusić go do działania bywa zaskakująco trudne.

Puste miejsce zamiast menu nawigacyjnego. Albo menu jest na desktopie, ale znika na mobile. Naprawiamy to tak:

Otwierasz stronę i pierwszy akapit tekstu jest schowany pod headerem. Klasyczny problem – wynika z użycia position: fixed zamiast position: sticky, lub braku kompensacji wysokości headera.

Header, który wygląda świetnie na desktopie, może być katastrofą na mobile. Duże logo, rozbudowane menu, kilka przycisków CTA – na ekranie 375px to po prostu nie zmieści się w jednej linii.

Na koniec – trzy najczęściej potrzebne fragmenty CSS. Wklej je w Wygląd > Dostosuj > Dodatkowy CSS (zamień selektory na odpowiednie dla Twojego motywu).

Sticky header: .site-header { position: sticky; top: 0; z-index: 9999; background: #fff; }

Fix nakładania headera na treść: body { padding-top: 80px; } @media (max-width: 768px) { body { padding-top: 60px; } }

Transparent header z tłem po scroll (wymaga JS): document.addEventListener('scroll', function() { const header = document.querySelector('.site-header'); header.classList.toggle('scrolled', window.scrollY > 50); }); – w CSS: .site-header.scrolled { background: rgba(255,255,255,0.95); box-shadow: 0 2px 10px rgba(0,0,0,0.1); }

Masz problemy z nagłówkiem i menu na stronie WordPress? Skontaktuj się z nami – projektujemy i naprawiamy headery responsywne, sticky i zgodne z najlepszymi praktykami UX. Sprawdź też naszą ofertę tworzenia stron internetowych.

Problemy z headerem to w 80% przypadkow kwestia CSS, a nie samego motywu. Sticky header nie dziala, menu sie rozjezdza na mobile, logo ma zla wielkosc – to wszystko naprawisz w Inspektorze przegladarki w 15 minut. Zanim instalujesz kolejna wtyczke do headera, otworz DevTools i sprawdz, ktory element CSS powoduje problem. Jesli potrzebujesz pomocy – napisz do nas.