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ć.
