Naprawianie responsywnego menu nawigacyjnego w Divi

Tworzenie responsywnego menu nawigacyjnego, które wygląda świetnie na wszystkich rozmiarach ekranu, może być trudne. Chciałbym, żeby to nie było tak ważne, ale ponieważ nawigacja jest zwykle na górze każdej strony witryny, jest to rzecz, która jest widoczna jako pierwsza na każdej stronie. Dlatego ważne jest, aby zrobić to dobrze. Na szczęście dostosowywanie motywów Divi pozwala dostosować menu główne za pomocą całkiem fajnych opcji nagłówka. Ale w przypadku domyślnego stylu menu z logo po lewej stronie i linkami menu po prawej, rzeczy mogą się łatwo przetasować na mniejszych rozmiarach ekranu, zwłaszcza gdy masz zbyt wiele linków zapełniających nagłówek. Wiem, że dla mnie to się często zdarza. Menu wygląda jak na komputerze, a potem sprawdzasz je na tablecie (zwłaszcza na iPadzie Pro), a logo nakłada się na menu, a niektóre linki przeskoczyły o jedną linię.

Dzisiaj przedstawię kilka pomocnych rozwiązań dla tych zatłoczonych menu nawigacyjnych, aby wyglądały świetnie nawet na niezbyt popularnych rozmiarach ekranu. W końcu, przynajmniej dla niektórych użytkowników, od tego zależy wiarygodność Twojej witryny.

Zacznijmy.

Naprawianie responsywnego menu nawigacyjnego w Divi

Subskrybuj nasz kanał YouTube

Cztery rozwiązania dla zatłoczonego menu nawigacyjnego

Jedną z wielkich zalet Divi jest to, że jest zbudowany na układzie siatki płynnej, która wykorzystuje zapytania o media (skompartmentalizowany CSS), aby dostosować styl witryny do różnych rozmiarów ekranu. Punkt, w którym dokonuje się tych korekt, nazywamy punktami przerwania. Jeśli chcesz udoskonalić swoje główne menu nawigacyjne na WSZYSTKICH rozmiarach ekranu, prawdopodobnie będziesz musiał dostosować swoje menu za pomocą zapytań o media i dostosować niektóre punkty przerwania.

Problem

Najczęstszym problemem, na który napotykam podczas korzystania z domyślnego menu nawigacyjnego Divi, jest sytuacja, gdy klient chce mieć wiele pozycji menu najwyższego poziomu. Posiadanie więcej niż 5 pozycji menu (lub posiadanie pozycji menu z dużym rozmiarem czcionki) w głównym menu nawigacyjnym często tworzy podział linii i powiększone logo, gdy rozmiar ekranu osiąga szerokość między 980-1100 pikseli (rozmiar małych laptopów i duże tabletki). Jestem przekonany, że miałeś już ten problem, nawet jeśli nigdy go nie zauważyłeś. Wygląda to mniej więcej tak:

Nieidealny. Przyjrzyjmy się więc czterem rozwiązaniom tego problemu.

Rozwiązanie nr 1: Ustaw pasek menu na pełną szerokość

Zwykle nie sugerowałbym pełnej szerokości menu nawigacyjnego, chyba że reszta mojej witryny również miała pełną szerokość. Myślę, że konsekwencja w projektowaniu jest ważna. Czasami jednak warto pójść na kompromis, jeśli oznacza to, że menu nawigacyjne wygląda świetnie na wszystkich urządzeniach. Jest to również prosta poprawka.

Przejdź do Theme Customizer > Nagłówek i nawigacja > Główny pasek menu i wybierz opcję Ustaw pełną szerokość .

Rozwiązanie nr 2: Dostosuj ustawienia logo i czcionki.

Innym prostym rozwiązaniem problemu jest użycie ustawień dostosowywania motywu w celu dostosowania domyślnych opcji Maksymalna wysokość logo, Rozmiar tekstu lub Czcionka.

Zachowaj ostrożność podczas dostosowywania tych opcji, ponieważ nigdy nie chcesz narażać projektu i czytelności swojego logo lub elementów menu w celu łatwej naprawy.

Rozwiązanie nr 3: Wyświetlanie menu mobilnego w nowym punkcie przerwania.

Oto ogólne zakresy dla każdego z punktów przerwania w Divi:

Duży komputer stacjonarny: 1405 pikseli i więcej
Standardowy komputer stacjonarny: od 1100 do 1405 pikseli
Laptopy i duże tablety: od 980 do 1100 pikseli
Tablety: od 768 do 980 pikseli
Smartfony i małe tablety: od 320px do 768px;
Smartfony: od 320 do 480 pikseli;

Punkt przerwania, w którym domyślne menu nawigacyjne zamienia się w menu mobilne (z nawigacją hamburgerową) to 980 pikseli. Każdy ekran o rozmiarze mniejszym niż 980 pikseli pokaże menu mobilne.

Ale jeśli chcesz uniknąć dziwnych podziałów linii menu, zmień punkt przerwania na inną wartość. Załóżmy, że chcesz wyświetlić menu mobilne w rozdzielczości około 1024 pikseli zamiast 980 pikseli. Aby to zrobić, musisz wstawić niestandardowy CSS w zapytaniu o media, aby zastąpić domyślny styl w Divi.

Przejdź do Theme Customizer > Dodatkowe CSS i wprowadź następujące dane:

@media (max-width: 1024px) {
 #et_mobile_nav_menu {
 display: block;
 }

#top-menu {
 display: none;
 }
 }

To zapytanie o media robi dwie rzeczy. Ukrywa zwykłe menu i wyświetla menu mobilne w punkcie przerwania 1024px.

Rozwiązanie nr 4: Dostosowywanie stylu menu w określonym punkcie przerwania

To rozwiązanie jest prawdopodobnie najlepszą opcją, ponieważ pozwala mieć największą kontrolę nad menu w określonych punktach przerwania. Możesz kierować elementy menu, używając ich klasy css, aby utworzyć niestandardowy styl w zapytaniu o media.

Oto domyślny CSS Divi dla Twoich elementów menu:

#top-menu li {
    display: inline-block;
    padding-right: 22px;
    font-size: 14px;
}

Załóżmy, że chcesz, aby rozmiar czcionki menu wynosił domyślnie 18 pikseli, ale chcesz zmienić go na 14 pikseli w określonym punkcie przerwania. Aby zaoszczędzić jeszcze więcej miejsca, możesz zmniejszyć dopełnienie do 15 pikseli zamiast 22 pikseli. Możesz to zrobić, kierując na klasę CSS dla wszystkich elementów menu i tworząc zapytanie o media

Przejdź do Theme Customizer > Dodatkowe CSS i wprowadź następujące dane:

@media (max-width: 1200px) {
 #top-menu li, #top-menu li a {
 font-size: 14px;
 padding-right: 15px;
 }
 }

To, co robi ten CSS, to zmiana rozmiaru czcionki na 14px i odpowiedniego dopełnienia na 15px na dowolnym ekranie 1200px lub mniejszym. Zapewnia to płynne przejście podczas dostosowywania rozmiaru ekranu na komputerze i pozwala zachować domyślną nawigację na dużych tabletach i małych laptopach.

Dostosowywanie innych stylów nagłówków

Istnieje pięć stylów nagłówków do wyboru w programie Divi's Theme Customizer (nie licząc nawigacji pionowej). Pięć stylów obejmuje domyślny (ten, który został już omówiony w tym poście), wsuwane, pełnoekranowe, wyśrodkowane i wyśrodkowane wbudowane logo.

Style wsuwane i pełnoekranowe

Jeśli projektujesz witrynę, która wymaga stylu wsuwania lub pełnoekranowego, Twoje responsywne menu jest prawie niezawodne, ponieważ ikona hamburgera w nawigacji mobilnej jest używana do uruchamiania menu na wszystkich rozmiarach ekranu.

Wyśrodkowany styl

Jeśli używasz wyśrodkowanego stylu, masz więcej miejsca na elementy menu, aby oddychać, ale jeśli nadal potrzebujesz więcej miejsca, możesz użyć tych samych niestandardowych rozwiązań, które zastosowaliśmy w przypadku domyślnego stylu, aby wyglądał tak, jak chcesz.

Wyśrodkowany styl wbudowanego logo

Wreszcie, wyśrodkowany nagłówek w stylu wbudowanego logo jest nieco trudny do uzyskania od samego początku. Musisz zrobić kilka rzeczy dobrze, jeśli chcesz, aby logo było wyśrodkowane na stronie. Najpierw musisz mieć parzystą liczbę pozycji menu, aby środkowe logo pozostało centralnym elementem.

Po drugie, ilość tekstu użytego w każdej pozycji menu określi punkt centralny logo. Jeśli masz więcej tekstu po jednej stronie, logo będzie nieco przesunięte. Nie jest to wielka sprawa w większości sytuacji, ale jeśli masz nagłówek z wyśrodkowanymi elementami bezpośrednio pod logo, może to być oczywisty problem, który będziesz musiał naprawić.

Zwróć uwagę, że logo jest nieco wyśrodkowane w menu w porównaniu z wyśrodkowanym logo w sekcji nagłówka.

Teraz skrócę etykietę pozycji menu „Elementy informacji” do „Informacje”. Teraz spójrz, jak logo przesuwa się bardziej do środka.

To rozwiązanie może być wszystkim, czego potrzebujesz, aby logo było tam, gdzie chcesz. Możesz być w stanie ujść na sucho ze zmianą czegoś takiego jak „O nas” na „O” lub odwrotnie, aby wprowadzić te drobne poprawki.

Ale może to być trochę frustrujące, jeśli jesteś perfekcjonistą (mogę mieć swoje chwile. Uwierz mi). Istnieje więc głębszy poziom dostosowywania, który możesz zrobić, jeśli chcesz wprowadzić jeszcze więcej poprawek. Zamiast dostosowywać rzeczywisty tekst w elemencie menu w celu dostosowania punktu środkowego logo, możesz dodać niestandardową klasę CSS do dowolnego elementu i nadać mu trochę dopełnienia w prawo lub w lewo. To powinno dać ci ostatni impuls, którego potrzebujesz, aby wszystko wyśrodkować.

Z pulpitu nawigacyjnego wordpress przejdź do Wygląd> Menu i upewnij się, że masz zaznaczone klasy CSS w obszarze Opcje ekranu.

Następnie otwórz pozycję menu, na którą chcesz kierować. Następnie wprowadź klasę CSS w polu wprowadzania Klasy CSS. Nazywam swoje „szturchnij”.

Następnie przejdź do Divi> Theme Customizer> Dodatkowy CSS i dodaj następujący niestandardowy CSS:

#top-menu li.nudge  {
padding-right: 32px;
}

W tym CSS tylko element z klasą „popychanie” otrzymuje prawidłowe wypełnienie 32px; To przesuwa logo na tyle, aby było wyśrodkowane.

Otóż ​​to!

Myśli końcowe

Divi sprawia, że ​​tworzenie stron internetowych jest łatwe i przyjemne. Czasami jednak wymagania pracy (i nasi klienci) wymagają od nas dołożenia wszelkich starań, aby nasze witryny były znakomite. A to, co odróżnia dobre witryny od świetnych, to drobne szczegóły. Sposób działania responsywnego menu nawigacyjnego jest jednym z tych ważnych szczegółów, które chcesz poprawić. W większości przypadków jest to pierwsza rzecz, którą Twoi użytkownicy zobaczą i zaangażują się na każdej stronie Twojej witryny. Zepsute menu może pozostawić złe pierwsze wrażenie. Mam nadzieję, że ten post pomoże „nakłonić” Cię we właściwym kierunku (przepraszam, że nie mogłem się powstrzymać :)).

Jestem pewien, że jest więcej problemów i rozwiązań, których nie poruszyłem w tym poście. Zapraszam do zamieszczania ich w komentarzach. Czekam na kontakt z Państwem.

Pozdrawiam!