Masz stronę opartą na WordPressie, ale menu na telefonach nie reaguje po kliknięciu? To jeden z najczęstszych problemów z motywami responsywnymi. Strona wygląda dobrze na komputerze, ale na urządzeniach mobilnych przycisk menu (tzw. hamburger) po prostu nie działa. Przyczyn może być kilka – od błędów w JavaScript po konflikty między plikami motywu. Zobacz, jak rozwiązać ten problem krok po kroku.
1. Konflikt z plikiem Bootstrap
Najczęstszą przyczyną błędów rozwijanego menu w WordPressie jest konflikt bibliotek JavaScript, szczególnie w przypadku, gdy motyw lub wtyczka korzystają z frameworka Bootstrap. Często zdarza się, że motyw ładuje własną wersję pliku bootstrap.min.js, a dodatkowo inna wtyczka – np. Elementor lub motyw potomny – dołącza drugą kopię tej samej biblioteki. Efekt? Funkcja odpowiedzialna za rozwijanie menu przestaje działać.
Jak to naprawić?
– Sprawdź w konsoli przeglądarki (F12 → zakładka Console), czy nie pojawiają się błędy JavaScript.
– Jeśli widzisz błędy typu „Bootstrap is not a function” lub „Uncaught TypeError: $(…).collapse is not a function” – to właśnie problem z plikiem bootstrap.
– Rozwiązanie: usuń lub wyłącz duplikaty biblioteki Bootstrap. Zostaw tylko tę, która jest wbudowana w Twój motyw. W razie potrzeby możesz też przełączyć się na inną wersję biblioteki (np. 4.6 zamiast 5.x).
2. Brak załadowanego pliku jQuery
WordPress automatycznie ładuje jQuery, ale niektóre motywy lub optymalizujące wtyczki (np. Autoptimize, WP Rocket) potrafią usunąć lub opóźnić jego wczytywanie. W efekcie skrypt odpowiedzialny za rozwijanie menu nie ma do czego się odwołać.
Jak to sprawdzić?
– Otwórz konsolę przeglądarki i wpisz jQuery – jeśli zobaczysz komunikat „jQuery is not defined”, to znaczy, że biblioteka nie jest ładowana.
– W panelu WordPress przejdź do Wtyczki → Zainstalowane i tymczasowo wyłącz wtyczki optymalizacyjne.
– Upewnij się, że w pliku functions.php Twojego motywu nie usunięto standardowego wywołania jQuery.
3. Zły selektor w kodzie JavaScript
Niektóre motywy używają niestandardowych identyfikatorów lub klas dla przycisku menu. Jeśli w skrypcie JavaScript nie ma odniesienia do aktualnych elementów DOM (np. „.navbar-toggle” zamiast „.menu-toggle”), kliknięcie w ikonę nie uruchamia rozwijania.
Jak to poprawić?
– Otwórz plik header.php lub nav.js i sprawdź, jakie klasy są używane w kodzie przycisku menu.
– Jeśli używasz motywu potomnego, upewnij się, że jego HTML zgadza się ze strukturą oryginalnego motywu.
– Możesz też dodać własny skrypt w pliku custom.js:document.addEventListener('DOMContentLoaded', function() {
const toggle = document.querySelector('.menu-toggle');
const nav = document.querySelector('.main-navigation');
if(toggle && nav) {
toggle.addEventListener('click', function() {
nav.classList.toggle('active');
});
}
});
Ten prosty kod doda podstawową funkcję rozwijania menu na urządzeniach mobilnych.
4. Wtyczka powoduje konflikt
Jeśli problem pojawił się nagle, np. po instalacji nowej wtyczki, możliwe że to właśnie ona powoduje konflikt. Wtyczki optymalizujące CSS/JS lub dodające popupy, animacje, lazy load itp. mogą modyfikować strukturę DOM i blokować działanie menu.
Jak to sprawdzić?
– Wyłącz wszystkie wtyczki i sprawdź, czy menu zaczęło działać.
– Następnie włączaj je pojedynczo, aby znaleźć winowajcę.
– Jeśli wtyczka jest niezbędna – wyklucz pliki menu z jej optymalizacji (np. w WP Rocket → Wyklucz pliki JS).
5. Problem z CSS (brak widoczności menu)
Czasem menu działa poprawnie, ale jest po prostu… niewidoczne. Jeśli CSS zawiera błędne reguły (np. display: none lub z-index niższy niż tło), to po kliknięciu nic się nie dzieje, choć faktycznie się rozwija.
Jak to sprawdzić?
– Otwórz narzędzia deweloperskie (F12 → Elements) i kliknij przycisk menu.
– Sprawdź, czy element rozwijanego menu pojawia się w kodzie – jeśli tak, to problem jest w stylach CSS.
– W pliku stylu znajdź odpowiednią klasę (np. .menu-mobile) i ustaw:.menu-mobile {
display: block !important;
z-index: 9999;
}
Podsumowanie
Jeśli menu na Twojej stronie WordPress nie rozwija się na telefonach, najczęściej winny jest konflikt plików JavaScript – szczególnie biblioteki Bootstrap lub brak załadowanego jQuery. Warto też sprawdzić, czy nie występuje konflikt z wtyczkami lub błędny kod CSS. W większości przypadków problem da się naprawić w kilka minut, a Twoje menu znów zacznie działać na wszystkich urządzeniach.
Jeśli potrzebujesz pomocy w naprawie menu, optymalizacji strony lub dostosowaniu WordPressa do urządzeń mobilnych – napisz do mnie przez informatyk-sieradz.pl. Pomogę Ci szybko rozwiązać problem i usprawnić działanie strony.