Menu na desktopie potrafi wyglądać dobrze prawie od razu. Problem zaczyna się wtedy, gdy otwierasz stronę na telefonie i okazuje się, że logo jest za duże, odstępy są przypadkowe, hamburger siedzi zbyt blisko krawędzi, a po rozwinięciu całość bardziej przeszkadza niż pomaga.
W Divi 5 samo zbudowanie nagłówka to jeszcze nie koniec pracy. Na Webfluxie masz już osobny poradnik o budowie nagłówka z menu od zera, ale mobile menu to osobny etap: tu nie chodzi o to, żeby tylko „było”, ale żeby dało się z niego normalnie korzystać na telefonie.
W tym poradniku ustawisz proste mobile menu krok po kroku. Bez wtyczek, bez kombinowania i bez przebudowywania całego headera od początku.
Dlaczego mobile menu warto potraktować osobno
To, że header działa na desktopie, nie znaczy jeszcze, że działa na telefonie.
Na stronie /divi/ masz osobny wpis o tym, jak sprawdzać wygląd strony na telefonie i tablecie, co samo w sobie pokazuje ważną rzecz: responsywność nie jest dodatkiem na koniec, tylko normalną częścią pracy z Divi 5. Mobile menu jest jednym z tych miejsc, gdzie widać to najlepiej.
Najczęstsze problemy są zwykle te same:
-
za duże logo,
-
za mało miejsca na ikonę menu,
-
nierówne odstępy,
-
zbyt wysoki header po rozwinięciu,
-
menu, które wygląda dobrze tylko w builderze.
Dlatego ten temat warto potraktować jako osobny poradnik praktyczny, a nie tylko dopisek do wpisu o nagłówku.
Zanim zaczniesz
Najlepiej, jeśli masz już:
-
gotowy globalny header w Theme Builderze,
-
ustawione podstawowe kolory,
-
zdefiniowane menu WordPressa, które ma być wyświetlane.
To logicznie wynika z układu całej sekcji Divi na Webfluxie: najpierw fundamenty, później budowanie stron i elementów, a potem dopracowanie praktycznych wdrożeń. Wpis o Theme Builderze jest właśnie o tym, że elementy globalne, takie jak nagłówek, budujesz centralnie, a nie osobno na każdej stronie.
Krok 1 — zacznij od headera, nie od telefonu
Wejdź do:
Divi → Theme Builder
i otwórz swój globalny nagłówek.
To ważne, bo mobile menu nie jest osobnym bytem. To część headera, który już masz albo który budujesz od zera. Na /divi/ wpis o nagłówku z menu jest już obecny w sekcji „Zrób to w Divi 5”, więc ten artykuł powinien być jego naturalnym rozwinięciem, a nie alternatywą.
Najpierw popatrz na strukturę:
-
ile masz kolumn,
-
gdzie siedzi logo,
-
gdzie siedzi menu,
-
ile miejsca zajmują elementy po bokach.
Dopiero potem przechodź do widoku mobile.
Krok 2 — uprość układ na telefonie
Najczęstszy błąd polega na tym, że ktoś próbuje zachować ten sam układ z desktopu także na mobile.
To zwykle nie działa.
Na telefonie dobrze sprawdza się prosty schemat:
-
po lewej logo albo nazwa marki,
-
po prawej ikona menu,
-
bez dodatkowych ozdobników,
-
bez ściskania kilku elementów obok siebie.
Jeśli w headerze masz za dużo rzeczy, na mobile zaczną się przepychanki o miejsce. A wtedy zamiast prostego menu dostajesz układ, który wygląda jak kompromis po kilku poprawkach.
Krok 3 — zmniejsz logo, zanim zaczniesz poprawiać resztę
Bardzo często problemem nie jest samo menu, tylko logo.
Na desktopie może wyglądać dobrze, ale na telefonie:
-
zajmuje za dużo wysokości,
-
spycha ikonę hamburgera,
-
robi z headera zbyt wysoki pasek.
Dlatego pierwszy praktyczny ruch to sprawdzenie rozmiaru logo właśnie w ustawieniach responsywnych. Na /divi/ masz już osobny wpis o tym, jak sprawdzać widok telefonu i tabletu, więc ten krok dobrze się w to wpisuje: nie projektujesz „na oko”, tylko naprawdę oglądasz różne breakpointy.
Najprostsza zasada:
na mobile logo zwykle powinno być mniejsze niż wydaje Ci się potrzebne.
Krok 4 — dopilnuj odstępów po bokach
To detal, ale robi ogromną różnicę.
Jeśli logo jest przyklejone do lewej krawędzi, a hamburger do prawej, cały nagłówek wygląda tanio i ciasno. Z kolei jeśli paddingi są za duże, na małych ekranach nagle zaczyna brakować miejsca.
Sprawdź więc:
-
padding sekcji,
-
padding wiersza,
-
odstępy wewnątrz modułów,
-
wysokość całego headera.
Na stronie /divi/ mocno przewija się myślenie systemowe i porządkowanie layoutu od fundamentów, a nie przez przypadkowe poprawki. Właśnie tutaj to widać najlepiej: mobile menu psuje się często nie przez „zły moduł”, tylko przez kilka małych decyzji o spacingu.
Krok 5 — sprawdź samo rozwinięcie menu
Moment prawdy zaczyna się po kliknięciu w hamburger.
To właśnie wtedy wychodzą problemy:
-
pozycje menu są zbyt ciasne,
-
tekst linków jest za mały,
-
elementy są za blisko siebie,
-
rozwinięte menu nachodzi na inne części nagłówka.
Tutaj warto pilnować czterech rzeczy:
-
czy linki da się wygodnie kliknąć,
-
czy odstępy między nimi są równe,
-
czy menu po rozwinięciu jest czytelne,
-
czy wszystko mieści się bez wizualnego bałaganu.