Jak dopasować pasek menu na pulpicie i urządzeniu mobilnym do Divi

W dzisiejszym poście Divi podzielimy się krótką wskazówką, która pomoże Ci ulepszyć projekty mobilne. Wszyscy wiemy, że Twój projekt na urządzeniu mobilnym jest tak samo ważny, jak na komputerze, ale ze względu na niektóre standardowe ustawienia w Divi, nie wszystkie zmiany wprowadzane w konfiguratorze motywów wyglądają tak samo na komputerze, jak na urządzeniu mobilnym.

W tym poście zamierzamy w szczególności pokazać, jak utworzyć mniejszy mobilny pasek menu, który wygląda tak samo jak pasek menu na komputerze przy użyciu maksymalnej wysokości logo i minimalnej wysokości menu. Domyślnie perspektywy na urządzenia mobilne i komputery stacjonarne różnią się. Tylko dlatego, że ustawiłeś określoną wysokość menu i maksymalną wysokość logo, nie oznacza to, że to samo dotyczy urządzeń mobilnych.

Różnica dla urządzeń mobilnych i komputerów stacjonarnych

Istnieje wiele stron internetowych, które celowo wybierają pasek menu głównego o niewielkiej wysokości. Po prostu wygląda bardziej elegancko i zajmuje mniej miejsca, co jest zdecydowanie interesujące, jeśli korzystasz również z nawigacji stałej.

Po wybraniu najwyższej wartości Maks. wysokość logo (czyli 100) w Konfiguratorze motywów i najniższej wartości wysokości menu (czyli 30), na pulpicie otrzymasz następujący wynik:

W przypadku urządzeń mobilnych proporcje logo i wysokości menu są jednak inne. Jeśli wybrałeś najwyższą wartość Maks. wysokość logo i najniższą wartość Wysokość menu, nie uzyskasz takiego samego wyniku, jak na pulpicie. Zamiast tego uzyskany wynik będzie wyglądał tak:

Wynik

Teraz pokażemy, jak zastosować ten sam układ do paska menu urządzenia mobilnego. Oznacza to, że logo będzie miało w menu swoją maksymalną wysokość. Poza tym sam pasek menu będzie znacznie mniejszy. W końcu na ekranie pozostanie więcej miejsca na wyświetlanie treści na Twojej stronie.

Po wykonaniu tego samouczka krok po kroku, osiągniesz następujący wynik:

Co oczywiście wygląda bardziej jak wersja na komputery stacjonarne:

Jak dopasować pasek menu na pulpicie i urządzeniu mobilnym do Divi

Subskrybuj nasz kanał YouTube

Ustawienia głównego paska menu

Pierwszą rzeczą, którą zrobimy, jest wprowadzenie niezbędnych zmian w głównym pasku menu w konfiguratorze motywów. Jeśli jesteś na swoim pulpicie nawigacyjnym WordPress, przejdź do Wygląd > Dostosuj > Nagłówek i nawigacja > Główny pasek menu i upewnij się, że zastosowano następujące ustawienia:

• Ukryj obraz logo: Wyłącz
• Wysokość menu: 30
• Maksymalna wysokość logo: 100

Mobilny pasek menu Dodatkowy kod CSS

Następną rzeczą, którą musimy zrobić, jest dodanie dodatkowego kodu CSS, aby pasek menu urządzenia mobilnego wyglądał tak samo, jak pasek menu na komputerze. Możemy wybrać dodanie kodu CSS do jednej strony w szczególności (jeśli chcemy tylko pokazać menu w ten sposób tylko na niektórych stronach) lub do całej witryny. Zazwyczaj stosujesz kod CSS do całej witryny, aby zachować niezbędną spójność w witrynie, ale to zależy od Ciebie.

Dodaj kod CSS do jednej strony w szczególności

Aby dodać kod CSS w szczególności do jednej strony, musisz otworzyć stronę w panelu WordPress. Podczas korzystania z konstruktora Divi musisz kliknąć w nim następującą ikonę:

Następnie możesz wziąć następujące wiersze kodu CSS i umieścić je w polu Custom CSS:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Dodaj kod CSS do całej witryny

Inną możliwością i prawdopodobnie tą, która będzie najczęściej wykorzystywana, jest dodanie kodu do całej witryny. Można to zrobić na dwa sposoby.

Dzięki konfiguratorowi motywów

Pierwsza metoda polega na dodaniu kodu CSS do Konfiguratora motywów. Aby to zrobić, przejdź do pulpitu WordPress> Wygląd> Dostosuj> Dodatkowy CSS> Umieść następujące wiersze kodu CSS w polu Niestandardowy CSS:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Ta opcja pozwala zobaczyć zmiany zachodzące w czasie rzeczywistym. Jest to prawdopodobnie najciekawszy wybór, jeśli zamierzasz zmienić niektóre rzeczy w kodzie i chcesz zobaczyć, jak to wygląda przed zapisaniem zmian.

Poprzez opcje motywu

Drugą metodą jest dodanie kodu CSS do opcji motywu. Aby to zrobić, przejdź do pulpitu nawigacyjnego WordPress> Divi> Opcje motywu> Przewiń kartę Ogólne i umieść następujący kod CSS w polu Niestandardowy CSS:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Zmodyfikuj kod do własnych preferencji

Oczywiście nie jest to jedyny sposób, w jaki możesz sprawić, by mobilny pasek menu wyglądał. Jeśli stosujesz różne ustawienia do głównego paska menu w konfiguratorze motywów, bardzo prawdopodobne jest, że będziesz musiał wprowadzić zmiany również w kodzie CSS. Jednak klasy CSS i identyfikatory CSS, których będziesz używać, są takie same.

Jedną z rzeczy, które na pewno musisz wziąć pod uwagę, jest górna wyściółka kontenera strony. Wartość, którą przypisaliśmy w naszym kodzie CSS, jest zgodna z innymi wprowadzonymi przez nas zmianami. Jeśli jednak zmienisz wartości w innych klasach, będziesz musiał upewnić się, że górne wypełnienie pozostaje poprawne. Najprostszym sposobem, aby to zrobić, jest rozpoczęcie od wyższej wartości i modyfikowanie wartości, aż zobaczysz, jak kontener strony wpada na swoje miejsce.

Wynik

Jeśli postępowałeś zgodnie z tym samouczkiem krok po kroku, powinieneś być w stanie osiągnąć następujący wynik na pasku menu urządzenia mobilnego:

Który wygląda prawie tak samo, jak wynik uzyskany na komputerach stacjonarnych:

Przed wprowadzeniem jakichkolwiek zmian CSS wynik na urządzeniu mobilnym wygląda tak:

Końcowe przemyślenia

W tym poście pokazaliśmy, jak zmniejszyć mobilny pasek menu i dopasować go do paska menu na komputerach stacjonarnych. Możesz po prostu dodać potrzebny kod CSS do konkretnej strony lub całej witryny, aby ta metoda działała. Jeśli masz jakieś pytania lub sugestie; upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej!

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!