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

Problemy z nagłówkiem dzielą się na trzy wyraźne grupy, a ustalenie kategorii to połowa rozwiązania.

1. Sticky header (lepkość) – nagłówek nie przykleja się do góry ekranu przy przewijaniu, miga, znika albo przykleja się tylko częściowo. Źródłem jest zwykle CSS: brak `position: sticky`, nadpisany kontener nadrzędny lub błędny `z-index`.

2. Menu i nawigacja – menu nie wyświetla się wcale, nie jest przypisane do lokalizacji motywu, hamburger na mobile nie reaguje na dotyk, albo zmiany w menu się nie zapisują. To najczęściej kwestia konfiguracji, konfliktu wtyczek lub blokowanego JavaScriptu.

3. Pozycjonowanie (nakładanie) – header zachodzi na treść strony, zasłania pierwszy nagłówek H1 albo nakłada się na pasek administratora WordPress. Tu winę ponosi brak kompensacji wysokości (`padding-top`) lub konflikt `z-index`.

dlatego ten przewodnik traktujemy jako pełną mapę diagnostyczną. Header wpływa też bezpośrednio na konwersję: lepki nagłówek utrzymuje przycisk CTA i numer telefonu w zasięgu wzroku przez cały czas przewijania. Jeśli zależy Ci na bezbłędnym, szybkim motywie, sprawdź jak budujemy strony internetowe dopięte technicznie.

Zanim dotkniesz CSS, ustal typ motywu. To determinuje całą resztę diagnozy, a większość poradników ten krok pomija.

Drzewo decyzyjne:

• Wejdź w panel WordPress i sprawdź menu Wygląd.
• Widzisz pozycję Edytor (zamiast Konfigurator/Dostosuj)? To motyw blokowy (Full Site Editing, FSE) – typowy dla WordPress 6.x i motywów Twenty Twenty-Four, Twenty Twenty-Five.
• Widzisz Konfigurator i klasyczne Menu? To motyw klasyczny – Astra, GeneratePress, OceanWP, większość komercyjnych motywów.
• Korzystasz z buildera (Elementor, Divi)? Header buduje wtedy wtyczka, nie sam motyw – diagnoza idzie przez ustawienia buildera.

Dlaczego to ważne? W motywie klasycznym header edytujesz w plikach lub Konfiguratorze, a sticky włączasz prostym CSS. W motywie blokowym header to wzorzec (template part) edytowany w Edytorze witryny, a lepkość ustawiasz w opcjach bloku Grupa lub przez selektor `:has()`. Pomylenie tych dwóch ścieżek to najczęstsza przyczyna godzin zmarnowanych na rozwiązaniach, które nie mogą zadziałać.

Sticky header opiera się na właściwości CSS `position`, a większość problemów sprowadza się do trzech przyczyn.

Różnica position: sticky vs fixed

• `position: sticky` – element zachowuje się normalnie, dopóki nie dojdzie do zadanego progu (`top: 0`), wtedy przykleja się do krawędzi. Nie wypada z układu, treść pod nim nie skacze.
• `position: fixed` – element jest na stałe wyrwany z układu i przyklejony do okna. Wymaga ręcznej kompensacji wysokości, inaczej zasłoni pierwszą sekcję treści.

Trzy najczęstsze przyczyny braku lepkości:

1. Kontener nadrzędny ma `overflow: hidden` – `position: sticky` przestaje działać, jeśli którykolwiek rodzic ma ustawione `overflow: hidden`, `auto` lub `scroll`. To przyczyna numer jeden.
2. Brak `top: 0` – `position: sticky` bez zdefiniowanego progu (np. `top`) nie ma punktu zaczepienia i zachowuje się jak statyczny element.
3. Za niski `z-index` – header przykleja się, ale chowa się pod treścią. Dodaj `z-index: 100` lub wyższy.

W DevTools (F12) zaznacz nagłówek i w zakładce Computed sprawdź realną wartość `position` oraz `overflow` rodziców.

Motywy blokowe owijają header w dodatkowe kontenery, przez co klasyczny CSS często nie trafia w odpowiedni element. WordPress 6.x renderuje nagłówek zwykle jako `

.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 100;
}

body:has(header.wp-block-template-part) header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
}

Popularne motywy i buildery mają własne, wbudowane przełączniki sticky – warto je znać, zanim sięgniesz po CSS.

• Astra – sticky header dostępny w dodatku Astra Pro (moduł Sticky Header) lub przez wtyczkę Sticky Header. Włączasz w Konfigurator > Header Builder > Sticky Header.
• GeneratePress – moduł Sticky w GP Premium. Aktywuj w Wygląd > GeneratePress > Modules, potem ustawienia w sekcji Layout > Header.
• Elementor – w wersji Pro zbuduj header w Theme Builder, a następnie w ustawieniach sekcji nagłówka przejdź do Advanced > Motion Effects > Sticky: Top. Bez Elementor Pro tej opcji nie ma.
• Divi – w Divi Theme Builder edytuj globalny header, zaznacz wiersz (Row), wejdź w Advanced > Position > Sticky Position: Stick to Top.

Jeśli motyw lub builder ma natywny przełącznik, używaj go zamiast ręcznego CSS – aktualizacje go nie nadpiszą, a opcja uwzględnia kompensację wysokości. Konfiguracja zaawansowanych motywów to częsty element naszych wdrożeń WordPress.

Gdy żaden wbudowany przełącznik nie pomaga, zadziała uniwersalny CSS. Cała sztuka to trafienie we właściwy selektor.

Trzy linie, które rozwiązują większość przypadków:

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
}

Jak znaleźć selektor swojego headera w DevTools:

1. Naciśnij F12, by otworzyć narzędzia deweloperskie.
2. Kliknij ikonę strzałki (Inspect / Wybierz element) i najedź na nagłówek strony.
3. W panelu Elements zobaczysz podświetlony tag, np. `

Brak menu to objaw kilku różnych przyczyn. Przejdź listę po kolei, od najczęstszej.

1. Menu nie jest przypisane do lokalizacji motywu. W motywie klasycznym wejdź w Wygląd > Menu > Ustawienia menu i zaznacz lokalizację (np. Primary Menu, Header Menu). Bez przypisania menu istnieje, ale motyw nie wie, gdzie je pokazać.

2. W motywie blokowym brak bloku Nawigacja. W FSE menu to blok Navigation. Wejdź w Wygląd > Edytor, otwórz wzorzec Nagłówek i sprawdź, czy blok Nawigacja zawiera pozycje. Jeśli pusty, dodaj odnośniki ręcznie lub wybierz istniejące menu z opcji bloku.

3. Menu jest puste. Banalne, ale częste – w panelu menu nie dodano żadnych pozycji albo nie kliknięto Zapisz menu.

4. Ukryte przez CSS lub konflikt. Menu istnieje w kodzie (sprawdź F12 > Elements), ale ma `display: none` lub zerową wysokość. Szukaj reguły CSS od wtyczki lub niedokończonej stylizacji.

5. Konflikt JavaScript – patrz sekcja o menu mobilnym poniżej.

Hamburger, który nie otwiera menu po kliknięciu, to niemal zawsze problem z JavaScriptem, a najczęstszym sprawcą jest wtyczka cache lub optymalizacji.

Wtyczki takie jak WP Rocket, LiteSpeed Cache czy Autoptimize łączą i odraczają pliki JS (defer / delay). Gdy skrypt obsługujący menu mobilne zostanie załadowany za późno lub w złej kolejności, kliknięcie hamburgera nic nie robi.

Jak wykluczyć konkretny skrypt z optymalizacji:

• WP Rocket – zakładka File Optimization, pole Excluded JavaScript Files lub Delay JavaScript Execution, dodaj fragment nazwy pliku JS menu.
• LiteSpeed Cache – Page Optimization > JS Settings, dodaj plik do JS Excludes.
• Autoptimize – Ustawienia > Autoptimize > JavaScript, pole Exclude scripts.

Jak znaleźć właściwy plik? W DevTools otwórz zakładkę Network, ustaw filtr na JS i odśwież stronę – zobaczysz listę skryptów. Plik motywu obsługujący nawigację zwykle ma w nazwie `navigation`, `menu` lub nazwę motywu. Wyklucz go i wyczyść cache. Sprawdź też zakładkę Console – błąd typu `Uncaught ReferenceError` wskazuje na brakujący lub niezaładowany skrypt.

Gdy nie wiesz, co psuje header lub menu, metoda eliminacji da odpowiedź w kilka minut. Zawsze testuj na kopii roboczej (staging), nie na produkcji.

Procedura diagnozy konfliktu:

1. Dezaktywuj wszystkie wtyczki naraz. Wejdź w Wtyczki, zaznacz wszystkie, akcja zbiorcza Wyłącz. Problem zniknął? Winna jest wtyczka.
2. Włączaj wtyczki pojedynczo, po każdej sprawdzając header/menu. Element, który ponownie psuje stronę, to sprawca.
3. Jeśli wtyczki nie winne – przełącz na motyw domyślny (Twenty Twenty-Four lub Twenty Twenty-Five). Problem zniknął? Wina leży w Twoim motywie.
4. Sprawdź konflikt JS w Console (F12) – czerwone błędy często wprost wskazują plik i wtyczkę, z której pochodzą.

Najczęstsze konflikty dotyczą wtyczek cache, builderów stron oraz wtyczek mega menu, które nadpisują standardową nawigację. Po znalezieniu winowajcy szukaj alternatywy lub zgłoś problem autorowi. Jeśli diagnoza przerasta Twój czas, skontaktuj się z nami – rozplątujemy takie konflikty regularnie.

Częsty szok po aktualizacji: znika pozycja Wygląd > Menu, a wraz z nią cały klasyczny edytor menu. To nie błąd – to skutek przejścia na motyw blokowy.

W motywach blokowych (Full Site Editing) WordPress świadomie ukrywa klasyczny ekran Menu, bo nawigacją zarządza teraz blok Navigation w Edytorze witryny. Zamiast Wygląd > Menu masz Wygląd > Edytor.

Gdzie teraz edytujesz menu:

1. Wejdź w Wygląd > Edytor.
2. Otwórz część szablonu Nagłówek (Header).
3. Kliknij blok Nawigacja i edytuj pozycje bezpośrednio na podglądzie.
4. Menu można też zarządzać przez Edytor > Wzorce > Części szablonu lub w sekcji Nawigacja w panelu bocznym.

Chcesz odzyskać klasyczny edytor menu? Zainstaluj wtyczkę Classic Menu lub wróć do motywu klasycznego. Drugą opcją jest wtyczka, która przywraca ekran Menu w panelu nawet przy motywie blokowym. Decyzja zależy od tego, czy planujesz korzystać z pełnego FSE, czy wolisz znaną klasyczną ścieżkę.

Klikasz Zapisz menu, a zmiany nie wchodzą? Trzy najczęstsze przyczyny.

1. Cache. Najczęstszy sprawca. Zmiana zapisała się w bazie, ale widzisz starą wersję z cache. Wyczyść cache wtyczki (WP Rocket, LiteSpeed) oraz cache przeglądarki (Ctrl+Shift+R / Cmd+Shift+R). Sprawdź też cache na poziomie serwera i Cloudflare.

2. Limit PHP `max_input_vars`. Bardzo rozbudowane menu (kilkadziesiąt pozycji) może przekroczyć domyślny limit `max_input_vars` (zwykle 1000). Wtedy część pozycji ucina się przy zapisie. Zwiększ wartość w `php.ini` lub `.htaccess` do np. 3000, albo poproś o to hosting.

3. Uprawnienia użytkownika. Tylko rola Administrator (lub z uprawnieniem `edit_theme_options`) może zapisywać menu. Sprawdź, czy nie pracujesz na koncie Redaktora.

Dodatkowo sprawdź zakładkę Console w DevTools podczas zapisu – błąd 403 lub timeout wskazuje na blokadę po stronie serwera (np. ModSecurity). Stabilny, dobrze skonfigurowany hosting to fundament – pomagamy go dobrać przy wdrożeniach WordPress.

Header z `position: fixed` jest wyrwany z układu strony, więc treść chowa się pod nim, a pierwszy nagłówek H1 znika za paskiem. Rozwiązaniem jest kompensacja wysokości.

Mechanizm: skoro fixed header zajmuje, powiedzmy, 80 px na górze, dodaj taki sam odstęp na początku treści.

body {
  padding-top: 80px;
}

lub na głównym kontenerze treści:

.site-content {
  margin-top: 80px;
}

Jak zmierzyć dokładną wysokość headera (zamiast zgadywać): w DevTools (F12) zaznacz nagłówek i w zakładce Computed odczytaj wartość `height`. To Twoja dokładna liczba do `padding-top`.

Uwaga na mobile: header bywa niższy na telefonie niż na desktopie. Użyj media queries, by ustawić różne wartości:

@media (max-width: 768px) {
  body { padding-top: 60px; }
}

Gdy używasz `position: sticky` zamiast `fixed`, problem znika sam – element nie wypada z układu i kompensacja nie jest potrzebna. To kolejny argument za sticky.

Zalogowani użytkownicy widzą u góry pasek administratora WordPress (admin bar). Fixed lub sticky header z `top: 0` wjeżdża pod ten pasek albo go zasłania.

WordPress sam dodaje do `` klasę `.logged-in` oraz `.admin-bar`, gdy pasek jest widoczny, a sam pasek ma stałą wysokość: 32 px na desktopie i 46 px na mobile (poniżej 783 px szerokości).

Rozwiązanie – przesuń header o wysokość paska tylko dla zalogowanych:

.admin-bar .site-header {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

Dzięki klasie `.admin-bar` reguła działa wyłącznie wtedy, gdy pasek jest faktycznie wyświetlany – goście strony nie zobaczą zbędnego odstępu.

Skąd wartości 32 i 46 px? To stałe wymiary paska WordPress. Możesz je samodzielnie zweryfikować: zaloguj się, otwórz F12, zaznacz `#wpadminbar` i w zakładce Computed odczytaj `height`. Zawsze warto zmierzyć, zamiast ślepo ufać liczbom z poradników.

Narzędzia deweloperskie przeglądarki (F12 lub prawy przycisk > Zbadaj) to najszybsza droga do źródła problemu. Oto gotowa checklista diagnostyczna w jednym flow.

Krok 1 – Console. Szukaj czerwonych błędów JavaScript. `Uncaught TypeError` lub `ReferenceError` wskazują na zepsuty lub niezaładowany skrypt (typowe przy martwym hamburgerze). Zapisz nazwę pliku z błędu.

Krok 2 – Network. Ustaw filtr na JS, odśwież stronę. Sprawdź, czy skrypty menu i headera ładują się ze statusem 200 (nie 404). Status 404 = brakujący plik, częsty po nieudanej aktualizacji.

Krok 3 – Elements + Computed. Zaznacz header i odczytaj realne wartości: `position`, `top`, `z-index`, `height`, `overflow`. To weryfikuje, czy Twój CSS faktycznie dochodzi do elementu, czy jest nadpisany (przekreślony w zakładce Styles).

Krok 4 – tryb responsywny. Włącz widok mobilny (ikona urządzenia) i powtórz testy – wiele problemów z headerem ujawnia się tylko na mobile.

Ten flow Console > Network > Computed rozwiązuje większość przypadków bez zgadywania. Problemy z headerem nie są kosmetyką: psują UX, mobilność i pośrednio SEO oraz konwersję, bo utrudniają dostęp do menu i CTA. Jeśli wolisz oddać to specjalistom, zobacz nasze usługi WordPress lub napisz przez formularz kontaktowy.

Nie chcesz grzebać w tym sam i ryzykować pogłębienia awarii? Naprawimy Twój WordPress – diagnoza w 30 minut, pełna naprawa od 299 zł, z miesięczną opieką w pakiecie.