W poprzednim wpisie pokazałem jak zrobić przyklejone menu w Elementor. Zgodnie z obietnicą, dziś kontynuuję wątek. Tym razem chciałbym Ci pokazać, jak osiągnąć ten sam efekt, czyli przyklejone menu w WordPress dla motywów bez użycia Elementora. Jest to sposób kompatybilny praktycznie z każdym motywem WordPress. Zaciekawiony? Zaczynamy!

Przyklejone menu w WordPress

Bez zbędnej zwłoki, napiszę od razu, że potrzebna będzie dedykowana wtyczka. Wtyczka, która rozpozna dowolny element na stronie (w naszym przypadku menu) i przyklei go na górze ekranu. Mam na myśli sprawdzoną już przeze mnie wtyczkę Sticky Menu & Sticky Header, która po instalacji objawi się na liście wtyczek jako Sticky Menu (or Anything!) on Scroll. Jej darmowa wersja w zupełności pozwoli Ci osiągnąć pożądany efekt.

Krok 1: Zainstaluj i włącz wtyczkę

Pierwszym krokiem, jest przejście do menu “Wtyczki -> Dodaj” nową i wyszukanie wtyczki Sticky Menu & Sticky Header. Dla ułatwienia pokazuję poniżej jej ikonę, opis i autora. Po instalacji włącz wtyczkę.

Krok 2: Przejdź do ustawień

Ustawienia wtyczki znajdziesz w zakładce “Ustawienia -> Sticky Menu (or Anything!)”. Na głównej karcie zobaczysz takie ustawienia jak poniżej. Aby wtyczka zadziałała, jedyne co musisz zrobić, to zatroszczyć się o właściwe uzupełnienie pola “Sticky Element: (required)”. To w zasadzie jedyna rzecz, którą musisz znać i skonfigurować. Należy tutaj podać ID lub klasę elementu (czyli górnego menu), który ma zawsze pływać przypięty na ekranie. U mnie jest to #masthead, ale u Ciebie może być inaczej. Jak to zweryfikować? Proste!

Krok 3: Zbadaj nazwę elementu z menu

Otwórz stronę główną i jeśli używasz przeglądarki Chrome, to najedź myszką na swoje menu i prawym przyciskiem myszy kliknij “Zbadaj”. Otworzysz tym samym narzędzia developerskie przeglądarki (DevTools). Odszukaj najwyższego elementu w hierarchii będącego kontenerem Twojego menu. Gdy zaczniesz najeżdżać na niego myszką, powinien podświetlić się cały na niebiesko. Zapamiętaj lub skopiuj nazwę selektora i wpisz w polu ustawień wtyczki pokazanym w poprzednim kroku. Pamiętaj, że jeśli podajesz ID elementu, to nazwę musisz poprzedzić znakiem #. Jeśli podajesz klasę elementu, to jego nazwę poprzedź kropką.

Krok 4: Drobne szlify

To w zasadzie tyle. Gdy zapiszesz ustawienia wtyczki i odświeżysz stronę główną Twoje menu będzie zawsze przyczepione u góry ekranu. Jeśli nie chcesz, aby menu przyklejało się na tabletach lub w smartfonach, to w polu pokazanym poniżej podaj rozdzielczość w pikselach poniżej której skrypt ma się wyłączyć. Celowo nie podaję tej wartości, ponieważ każdy motyw może mieć ją inną (np. 768px dla smartfonów).

Jeśli natomiast w trakcie przewijania strony zauważysz, że menu jest miejscami przesłonięte przez jakiś element, to należy przesunąć je na samą górę stosu elementów. Służy do tego parametr “z-index”. Po prostu przejdź wtedy do zakładki “Advanced settings” i wpisz “9999” zapisując następnie zmiany.

Podsumowanie

Tym razem dowiedziałeś/aś się jak zrobić przyklejone menu w WordPress bez użycia Elementor. Myślę, że zarówno ten, jak i poprzedni wpis wyczerpują temat 🙂. Jeśli masz jednak własne spostrzeżenia, koniecznie daj mi znać.