Cum să potriviți bara de meniu desktop și mobil cu Divi

În postarea Divi de astăzi, vă vom împărtăși un sfat rapid care vă va ajuta să vă îmbunătățiți designul de mobil. Știm cu toții că designul dvs. pe mobil este la fel de important ca și pe desktop, dar din cauza unor setări standard din Divi, nu toate modificările pe care le efectuați în Customizerul tematic arată la fel ca pe desktop.

Ceea ce vom face în această postare, în mod specific, este să vă arăt cum să creați o bară de meniu mobilă mai mică, care arată la fel ca bara de meniu de pe desktop atunci când utilizați înălțimea maximă a siglei și înălțimea minimă a meniului. În mod implicit, perspectivele de pe mobil și desktop diferă. Doar pentru că ați setat o anumită înălțime a meniului și o înălțime maximă a siglei, nu înseamnă că același lucru se va aplica și pentru dispozitive mobile.

Diferența pentru mobil și desktop

Există o mulțime de site-uri web care aleg în mod deliberat să aibă o bară de meniu principală cu o înălțime nu prea mare. Arată mai elegant și ocupă mai puțin spațiu, lucru cu siguranță interesant de luat în considerare dacă utilizați și navigație fixă.

Când alegeți cea mai mare valoare pentru Înălțimea maximă a logo-ului (care este 100) în Customizerul tematic și cea mai mică valoare a Înălțimii meniului (care este 30), veți avea următorul rezultat pe desktop:

Cu toate acestea, proporțiile logo-ului și înălțimea meniului sunt diferite pentru mobil. Dacă ați selectat cea mai mare valoare pentru Înălțimea maximă a siglei și cea mai mică valoare pentru Înălțimea meniului, nu veți avea același rezultat ca pe desktop. Rezultatul pe care îl veți obține va arăta astfel:

Rezultat

Acum, ceea ce vom face este să vă arătăm cum să aplicați același aspect la bara de meniu mobilă. Aceasta înseamnă că sigla va avea înălțimea maximă în meniu. În plus, bara de meniu în sine va fi mult mai mică. În cele din urmă, veți avea mai mult loc pe ecran pentru ca conținutul de pe pagina dvs. să apară.

După ce ați urmat acest tutorial pas cu pas, veți obține următorul rezultat:

Care, evident, seamănă mai mult cu versiunea desktop:

Cum să potriviți bara de meniu desktop și mobil cu Divi

Abonați-vă la canalul nostru Youtube

Setări principale ale barei de meniu

Primul lucru pe care îl vom face este să facem modificările necesare în bara de meniu principală din Customizerul tematic. Dacă vă aflați în tabloul de bord WordPress, accesați Aspect> Personalizare> Antet și navigare> Bara de meniu principală și asigurați-vă că se aplică următoarele setări:

• Ascundeți imaginea logo-ului: dezactivați
• Înălțimea meniului: 30
• Logo Înălțime maximă: 100

Meniu mobil Cod CSS suplimentar

Următorul lucru pe care trebuie să-l facem este să adăugăm un cod CSS suplimentar pentru ca bara de meniu mobilă să arate la fel ca bara de meniu pe desktop. Putem alege să adăugăm codul CSS într-o singură pagină în special (dacă dorim doar să afișăm meniul în acest fel numai pe anumite pagini) sau pe întregul site web. De obicei, veți aplica codul CSS pe întregul site web pentru a păstra coerența necesară pe site-ul dvs., dar asta depinde de dvs.

Adăugați cod CSS la o pagină în special

Pentru a adăuga codul CSS la o pagină în special, va trebui să deschideți pagina în tabloul de bord WordPress. În timp ce utilizați generatorul Divi, va trebui să faceți clic pe următoarea pictogramă din acesta:

Apoi, puteți lua următoarele linii de cod CSS și le puteți plasa în câmpul CSS personalizat:

@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;
}

Adăugați cod CSS pe întregul site web

Cealaltă posibilitate, și probabil cea care va fi utilizată cel mai mult, este adăugarea codului pe întregul site web. Există două modalități de a face acest lucru.

Prin Customizerul tematic

Prima metodă este prin adăugarea codului CSS în Theme Customizer. Pentru aceasta, accesați tabloul de bord WordPress> Aspect> Personalizare> CSS suplimentar> Plasați următoarele linii de cod CSS în câmpul CSS personalizat:

@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;
}

Această opțiune vă permite să vedeți schimbările care se întâmplă în timp real. Aceasta este probabil cea mai interesantă alegere dacă doriți să schimbați unele lucruri din cod și doriți să vedeți cum arată înainte de a salva modificările.

Prin Opțiunile temei

A doua metodă este prin adăugarea codului CSS la Opțiunile temei. Pentru aceasta, accesați tabloul de bord WordPress> Divi> Opțiuni temă> Derulați în jos fila General și plasați următorul cod CSS în câmpul CSS personalizat:

@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;
}

Modificați codul după propriile preferințe

Desigur, nu acesta este singurul mod în care puteți face ca bara de meniu mobil să arate. Dacă aplicați diferite setări pentru bara de meniu principală din Customizerul temei, este foarte probabil să fie nevoie să faceți modificările și în codul CSS. Cu toate acestea, clasele CSS și ID-urile CSS pe care le veți utiliza sunt aceleași.

Totuși, unul dintre lucrurile pe care trebuie să le luați în considerare este căptușeala superioară a containerului pentru pagini. Valoarea pe care am atribuit-o în codul nostru CSS se potrivește cu celelalte modificări pe care le-am făcut. Cu toate acestea, dacă modificați valorile din celelalte clase, va trebui să vă asigurați că umplutura superioară rămâne corectă. Cel mai simplu mod de a face acest lucru este să începeți cu o valoare mai mare și să modificați valoarea până când urmăriți că containerul de pagini se așează.

Rezultat

Dacă ați urmat acest tutorial pas cu pas, ar fi trebuit să puteți obține următorul rezultat pentru bara de meniu mobilă:

Care arată aproape exact la fel ca rezultatul pe care îl obțineți pe desktop-uri:

Înainte de a efectua modificări CSS, rezultatul de pe mobil arată astfel:

Gânduri finale

În această postare, v-am arătat cum să micșorați bara de meniu mobilă și să se potrivească cu bara de meniu de pe desktopuri. Puteți adăuga pur și simplu codul CSS necesar într-o pagină specială sau pe întregul site web pentru ca această metodă să funcționeze. Dacă aveți întrebări sau sugestii; asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!