Remedierea meniului de navigare receptiv în Divi

Crearea unui meniu de navigare receptiv care să arate excelent pe toate dimensiunile ecranului poate fi dificilă. Mi-aș dori să nu fie atât de important, dar din moment ce navigarea este în mod normal în partea de sus a fiecărei pagini a site-ului dvs., este lucrul care este vizibil mai întâi pe fiecare pagină. Deci, este important să o înțelegem corect. Din fericire, personalizatorul temei Divi vă permite să personalizați meniul principal cu câteva opțiuni de antet destul de interesante. Dar pentru stilul de meniu implicit cu sigla din stânga și legăturile din meniu spre dreapta, lucrurile se pot amesteca cu ușurință pe dimensiuni mai mici ale ecranului, mai ales atunci când aveți prea multe legături care înghesuie antetul. Știu că se întâmplă foarte mult pentru mine. Obțin meniul perfect pentru desktop și apoi îl verifici pe o tabletă (în special un iPad Pro), iar sigla se suprapune peste meniu, iar unele dintre linkuri au sărit pe o linie.

Astăzi, vă voi oferi câteva soluții utile pentru acele meniuri de navigare aglomerate, astfel încât să arate grozav chiar și pe acele dimensiuni de ecran nu atât de obișnuite. La urma urmei, cel puțin pentru unii utilizatori, credibilitatea site-ului dvs. depinde de acesta.

Să începem.

Remedierea meniului de navigare receptiv în Divi

Abonați-vă la canalul nostru Youtube

Patru soluții pentru un meniu de navigare aglomerat

Unul dintre lucrurile minunate despre Divi este că este construit pe un aspect de rețea fluid, care utilizează interogări media (CSS compartimentat) pentru a regla stilul site-ului dvs. pentru diferite dimensiuni de ecran. Punctul în care se fac aceste ajustări este ceea ce numim puncte de întrerupere. Dacă v-ați angajat să vă perfecționați meniul principal de navigare pe TOATE dimensiunile ecranului, este posibil să aveți nevoie să vă personalizați meniul folosind interogări media și să ajustați anumite puncte de întrerupere.

Problema

Cea mai frecventă problemă cu care mă confrunt când folosesc meniul de navigare implicit al Divi este atunci când un client dorește o mulțime de elemente de meniu de nivel superior. Dacă aveți mai mult de 5 elemente de meniu (sau aveți elemente de meniu cu o dimensiune mare a fontului) în meniul principal de navigare, veți crea adesea o linie și o mărire mărită atunci când dimensiunea ecranului atinge o lățime cuprinsă între 980-1100 pixeli (dimensiunea laptopurilor mici) și tablete mari). Sunt încrezător că ați avut această problemă înainte, chiar dacă nu ați observat-o niciodată. Arată cam așa:

Nu ideal. Deci, să analizăm patru soluții la această problemă.

Soluția nr. 1: faceți bara de meniu lățime completă

În mod normal, nu aș sugera să creezi lățimea completă a meniului tău de navigare, cu excepția cazului în care făceam și restul lățimii complete a site-ului meu. Cred că este importantă consistența în proiectare. Dar uneori este un compromis bun de făcut dacă înseamnă că meniul de navigare arată excelent pe toate dispozitivele. Și este o soluție simplă, de asemenea.

Accesați Theme Customizer> Header & Navigation> Main Menu Bar și selectați Make Full Width .

Soluția # 2: Reglați setările pentru siglă și font.

O altă soluție simplă la problema dvs. este să utilizați setările de personalizare a temei pentru a regla opțiunile implicite Logo Max Height, Text Size sau Font.

Aveți grijă când ajustați aceste opțiuni, deoarece nu doriți niciodată să cuprindeți designul și lizibilitatea logo-ului sau a elementelor de meniu pentru a face o soluție ușoară.

Soluția nr. 3: afișarea meniului mobil la un nou punct de întrerupere.

Iată intervalele generale pentru fiecare dintre punctele de întrerupere din cadrul Divi:

Desktop mare: 1405 px și peste
Desktop standard: între 1100px și 1405px
Laptopuri și tablete mari: între 980px și 1100px
Tablete: între 768px și 980px
Smartphone-uri și tablete mici: între 320px și 768px;
Smartphone-uri: între 320px și 480px;

Punctul de întrerupere în care meniul de navigare implicit se transformă în meniul mobil (cu navigarea hamburgerului) este de 980 px. Orice dimensiune a ecranului mai mică de 980 px va afișa meniul mobil.

Dar, dacă doriți să evitați orice întrerupere de linie de meniu ciudată, schimbați punctul de întrerupere la o valoare diferită. Să presupunem că doriți să afișați meniul mobil la aproximativ 1024 px în loc de 980 px. Pentru a face acest lucru, trebuie să introduceți câteva CSS personalizate într-o interogare media pentru a înlocui stilul implicit din Divi.

Accesați Theme Customizer > CSS suplimentar și introduceți următoarele:

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

#top-menu {
 display: none;
 }
 }

Această interogare media face două lucruri. Ascunde meniul obișnuit și afișează meniul mobil la punctul de întrerupere de 1024px.

Soluția # 4: Reglarea stilului meniului la un anumit punct de întrerupere

Această soluție este probabil cea mai bună opțiune, deoarece vă permite să aveți cel mai mare control asupra meniului dvs. la anumite puncte de întrerupere. Puteți viza elementele de meniu utilizând clasa CSS pentru a crea un stil personalizat în interogarea dvs. media.

Iată CSS implicit al Divi pentru elementele din meniu:

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

Să presupunem că doriți ca dimensiunea fontului meniului să fie de 18 px în mod implicit, dar doriți să se schimbe la 14 px la un anumit punct de întrerupere. Și pentru a economisi și mai mult spațiu, puteți reduce umplutura la 15 px în loc de 22 px. Puteți face acest lucru direcționând clasa css pentru toate elementele de meniu și creând o interogare media

Accesați Theme Customizer> CSS suplimentar și introduceți următoarele:

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

Ce face acest CSS este să schimbe dimensiunea fontului la 14 px și umplerea potrivită la 15 px pe orice ecran de 1200 px sau mai puțin. Acest lucru creează o tranziție lină atunci când reglați dimensiunea ecranului pe desktop și vă permite să păstrați navigarea implicită pe tablete mari și laptopuri mici.

Reglarea altor stiluri de antet

Există cinci stiluri de antet dintre care puteți alege în Theme Customizer Divi (fără a lua în considerare navigarea verticală). Cele cinci stiluri includ Default (cel adresat deja în această postare) Slide-in, Fullscreen, Centered și Centered Inline Logo.

Slide In și stiluri cu ecran complet

Dacă sunteți în designul site-urilor web, fie pentru stilul de diapozitiv, fie pentru stilul cu ecran complet, atunci meniul dvs. receptiv este practic infailibil, deoarece pictograma hamburger de navigare mobilă este utilizată pentru a declanșa meniul pe toate dimensiunile ecranului.

Stil centrat

Dacă utilizați stilul centrat, aveți mai mult spațiu pentru a respira elementele din meniu, dar dacă mai aveți nevoie de spațiu suplimentar, puteți utiliza aceleași soluții personalizate pe care le-am folosit pentru stilul implicit pentru a avea aspectul dorit.

Stil de siglă în linie centrat

În cele din urmă, antetul centrat în stilul logo-ului în linie este puțin complicat pentru a obține chiar de la început. Trebuie să faceți câteva lucruri corect dacă doriți ca sigla să fie centrată pe pagină. Mai întâi trebuie să aveți un număr par de elemente de meniu, astfel încât sigla din mijloc să rămână elementul central.

În al doilea rând, cantitatea de text pe care o utilizați pentru fiecare element de meniu va determina punctul central al siglei. Dacă aveți mai mult text pe o parte, sigla va fi oprită puțin. Acest lucru nu este mare lucru pentru majoritatea situațiilor, dar dacă aveți un antet cu elemente centrate direct sub siglă, aceasta poate fi o problemă evidentă pe care va trebui să o corectați.

Observați cum logo-ul este puțin centrat în meniu, comparativ cu logo-ul centrat din secțiunea antet.

Acum voi scurta eticheta elementului de meniu „Informații Elemente” la „Informații”. Uită-te acum la modul în care logo-ul se deplasează mai mult spre centru.

Această soluție poate fi tot ce aveți nevoie pentru a obține sigla acolo unde doriți. Este posibil să reușiți să schimbați ceva de genul „Despre noi” în „Despre” sau invers pentru a face aceste mici ajustări.

Dar, acest lucru poate deveni puțin frustrant dacă sunteți perfecționist (pot avea momentele mele. Credeți-mă.) Deci, există un nivel mai profund de personalizare pe care îl puteți face dacă doriți să faceți și mai multe ajustări. În loc să ajustați textul real din elementul de meniu pentru a regla punctul central al logo-ului, puteți adăuga o clasă CSS personalizată oricărui element și îi puteți oferi o umplutură la dreapta sau la stânga. Acest lucru ar trebui să vă ofere ultima lovitură de care aveți nevoie pentru ca totul să fie centrat.

Din tabloul de bord wordpress, accesați Aspect> Meniuri și asigurați-vă că aveți clase CSS bifate în zona Opțiuni ecran.

Apoi comutați pentru a deschide elementul de meniu pe care doriți să îl vizați. Apoi introduceți o clasă CSS în caseta de intrare Clase CSS. Îi numesc pe al meu „ghiont”.

După aceea, accesați Divi> Personalizator temă> CSS suplimentar și adăugați următoarele CSS personalizate:

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

Cu acest css, numai articolului cu clasa „nudge” i se oferă o umplutură dreaptă de 32 px; Asta împinge logo-ul doar cât să fie centrat.

Asta e!

Gânduri de închidere

Divi face ca construirea de site-uri web să fie distractivă și ușoară. Dar uneori, cerințele postului (și ale clienților noștri) ne impun să facem un efort suplimentar pentru a ne asigura că site-urile noastre sunt stelare. Și ceea ce separă site-urile bune de site-urile excelente sunt micile detalii. Modul în care funcționează meniul de navigare receptiv este unul dintre acele detalii importante pe care doriți să le corectați. De cele mai multe ori este primul lucru pe care îl vor vedea și interacționa utilizatorii dvs. pe fiecare pagină a site-ului dvs. Un meniu cu aspect defect poate lăsa o primă impresie proastă. Sper că această postare vă va ajuta să vă „împing” în direcția corectă (îmi pare rău că nu m-am putut abține :)).

Sunt sigur că există mai multe probleme și soluții pe care nu le-am abordat în această postare. Simțiți-vă liber să le postați în comentarii. Aștept cu nerăbdare să ne auzim.

Noroc!