Correzione del menu di navigazione reattivo in Divi

Creare un menu di navigazione reattivo che abbia un bell'aspetto su tutte le dimensioni dello schermo può essere difficile. Vorrei che non fosse così importante, ma poiché la navigazione è normalmente nella parte superiore di ogni pagina del tuo sito, è la cosa che è visibile per prima in ogni pagina. Quindi è importante farlo bene. Per fortuna, il personalizzatore del tema di Divi ti consente di personalizzare il menu principale con alcune opzioni di intestazione piuttosto interessanti. Ma per lo stile di menu predefinito con il logo a sinistra e i collegamenti di menu a destra, le cose possono essere facilmente rimescolate su schermi di dimensioni più piccole, specialmente quando ci sono troppi collegamenti che affollano l'intestazione. So che succede molto per me. Ottengo il menu che sembra giusto per il desktop e poi lo controlli su un tablet (in particolare un iPad Pro) e il logo si sovrappone al menu e alcuni dei collegamenti sono saltati giù di una riga.

Oggi ti darò alcune soluzioni utili per quei menu di navigazione affollati in modo che abbiano un bell'aspetto anche su quelle dimensioni dello schermo non così comuni. Dopotutto, almeno per alcuni utenti, la credibilità del tuo sito dipende da questo.

Iniziamo.

Correzione del menu di navigazione reattivo in Divi

Iscriviti al nostro canale Youtube

Quattro soluzioni per un menu di navigazione affollato

Una delle grandi cose di Divi è che è costruito su un layout a griglia fluido che utilizza query multimediali (CSS compartimentati) per regolare lo stile del tuo sito per le diverse dimensioni dello schermo. Il punto in cui vengono effettuati questi aggiustamenti è ciò che chiamiamo punti di interruzione. Se ti impegni a perfezionare il tuo menu di navigazione principale su TUTTE le dimensioni dello schermo, è probabile che dovrai personalizzare il tuo menu utilizzando le query multimediali e regolare determinati punti di interruzione.

Il problema

Il problema più comune in cui mi imbatto quando utilizzo il menu di navigazione predefinito di Divi è quando un cliente desidera molte voci di menu di primo livello. Avere più di 5 voci di menu (o avere voci di menu con caratteri di grandi dimensioni) nel menu di navigazione principale spesso creerà un'interruzione di riga e un logo ingrandito quando la dimensione dello schermo raggiunge una larghezza compresa tra 980-1100 pixel (la dimensione dei piccoli laptop e compresse grandi). Sono sicuro che tu abbia già avuto questo problema, anche se non te ne sei mai accorto. Sembra qualcosa del genere:

Non ideale. Quindi diamo un'occhiata a quattro soluzioni a questo problema.

Soluzione n. 1: rendere la barra dei menu a tutta larghezza

Normalmente non suggerirei di rendere il tuo menu di navigazione a tutta larghezza a meno che non stessi facendo anche il resto del mio sito a larghezza intera. Penso che la coerenza nel design sia importante. Ma a volte è un buon compromesso da fare se significa che il tuo menu di navigazione ha un bell'aspetto su tutti i dispositivi. Ed è anche una semplice soluzione.

Vai a Personalizzazione tema > Intestazione e navigazione > Barra dei menu principale e seleziona Crea larghezza completa .

Soluzione n. 2: regola le impostazioni del logo e del carattere.

Un'altra semplice soluzione al tuo problema consiste nell'utilizzare le impostazioni del personalizzatore del tema per regolare le opzioni predefinite di Altezza massima del logo, Dimensioni del testo o Carattere.

Fai attenzione quando regoli queste opzioni perché non vuoi mai compromettere il design e la leggibilità del tuo logo o delle voci di menu per fare una soluzione semplice.

Soluzione n. 3: visualizzazione del menu mobile in un nuovo punto di interruzione.

Ecco gli intervalli generali per ciascuno dei punti di interruzione all'interno di Divi:

Desktop grande: 1405 px e oltre
Desktop standard: tra 1100 px e 1405 px
Laptop e tablet di grandi dimensioni: tra 980 px e 1100 px
Tablet: tra 768px e 980px
Smartphone e Tablet di piccole dimensioni: tra 320px e 768px;
Smartphone: tra 320px e 480px;

Il punto di interruzione in cui il menu di navigazione predefinito si trasforma nel menu mobile (con l'hamburger nav) è 980px. Qualsiasi dimensione dello schermo inferiore a 980 px mostrerà il menu mobile.

Tuttavia, se desideri evitare strane interruzioni di riga di menu, modifica il punto di interruzione con un valore diverso. Supponiamo che tu voglia visualizzare il menu mobile a circa 1024 px invece di 980 px. Per fare ciò, dovresti inserire alcuni CSS personalizzati all'interno di una query multimediale per sovrascrivere lo stile predefinito in Divi.

Vai su Personalizzatore temi > CSS aggiuntivo e inserisci quanto segue:

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

#top-menu {
 display: none;
 }
 }

Questa media query fa due cose. Nasconde il menu normale e visualizza il menu mobile al punto di interruzione 1024px.

Soluzione n. 4: regolazione dello stile del menu a un determinato punto di interruzione

Questa soluzione è probabilmente l'opzione migliore perché ti consente di avere il massimo controllo sul tuo menu in determinati punti di interruzione. Puoi scegliere come target le tue voci di menu utilizzando la loro classe css per creare uno stile personalizzato nella tua query multimediale.

Ecco il CSS predefinito di Divi per le voci di menu:

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

Supponiamo che tu voglia che la dimensione del carattere del tuo menu sia di 18 px per impostazione predefinita, ma vuoi che cambi a 14 px a un certo punto di interruzione. E per risparmiare ancora più spazio, puoi ridurre il padding a 15 px invece di 22 px. Puoi farlo mirando alla classe css per tutte le voci di menu e creando una query multimediale

Vai a Personalizzatore temi > CSS aggiuntivo e inserisci quanto segue:

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

Quello che fa questo CSS è cambiare la dimensione del carattere a 14px e il padding giusto a 15px su qualsiasi schermo 1200px o meno. Ciò crea una transizione graduale durante la regolazione delle dimensioni dello schermo sul desktop e consente di mantenere la navigazione predefinita su tablet di grandi dimensioni e laptop di piccole dimensioni.

Regolazione di altri stili di intestazione

Ci sono cinque stili di intestazione tra cui scegliere all'interno di Divi's Theme Customizer (senza contare la navigazione verticale). I cinque stili includono Default (quello già affrontato in questo post) Slide-in, Fullscreen, Centered e Centered Inline Logo.

Stili a scorrimento e a schermo intero

Se il design del tuo sito Web richiede lo stile slide in o a schermo intero, il tuo menu reattivo è praticamente infallibile poiché l'icona dell'hamburger di navigazione mobile viene utilizzata per attivare il menu su tutte le dimensioni dello schermo.

Stile centrato

Se stai utilizzando lo stile centrato, hai più spazio per respirare le voci del menu, ma se hai ancora bisogno di più spazio, puoi utilizzare le stesse soluzioni personalizzate che abbiamo usato per lo stile predefinito per farlo apparire come desideri.

Stile logo in linea centrato

Infine, l'intestazione in stile logo in linea centrata è un po' difficile da ottenere fin dall'inizio. Devi fare alcune cose giuste se vuoi che il logo sia centrato sulla pagina. Per prima cosa devi avere un numero pari di voci di menu in modo che il logo centrale rimanga il fulcro.

In secondo luogo, la quantità di testo utilizzata per ciascuna voce di menu determinerà il punto centrale del logo. Se hai più testo su un lato, il logo sarà leggermente spostato. Questo non è un grosso problema per la maggior parte delle situazioni, ma se hai un'intestazione con elementi centrati direttamente sotto il logo, questo può essere un problema ovvio che dovrai correggere.

Nota come il logo è leggermente decentrato nel menu rispetto al logo centrato nella sezione dell'intestazione.

Ora accorcerò l'etichetta della voce di menu "Elementi informativi" in "Informazioni". Ora guarda come il logo si sposta maggiormente al centro.

Questa soluzione potrebbe essere tutto ciò di cui hai bisogno per ottenere il logo dove lo desideri. Potresti riuscire a farla franca cambiando qualcosa come "Chi siamo" in "Informazioni" o viceversa per apportare quei piccoli aggiustamenti.

Ma questo può diventare un po' frustrante se sei un perfezionista (posso avere i miei momenti. Credimi.) Quindi, c'è un livello più profondo di personalizzazione che puoi fare se vuoi fare ancora più aggiustamenti. Invece di regolare il testo effettivo nella voce di menu per regolare il punto centrale del logo, puoi aggiungere una classe CSS personalizzata a qualsiasi elemento e dargli un po' di riempimento a destra oa sinistra. Questo dovrebbe darti l'ultima spinta di cui hai bisogno per centrare le cose.

Dal dashboard di wordpress vai su Aspetto > Menu e assicurati di aver selezionato Classi CSS nell'area Opzioni schermo.

Quindi apri la voce di menu che desideri scegliere come target. Quindi inserisci una classe CSS nella casella di input Classi CSS. Sto chiamando il mio "nudge".

Successivamente, vai su Divi > Personalizzatore temi > CSS aggiuntivo e aggiungi il seguente CSS personalizzato:

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

Con questo css, solo l'elemento con la classe "nudge" riceve un padding destro di 32px; Ciò spinge il logo su quanto basta per centrarlo.

Questo è tutto!

Pensieri conclusivi

Divi rende la creazione di siti Web divertente e facile. Ma a volte, le esigenze del lavoro (e dei nostri clienti) ci richiedono di fare il possibile per assicurarci che i nostri siti siano stellari. E ciò che distingue i buoni siti dai grandi siti sono i piccoli dettagli. Il modo in cui si comporta il tuo menu di navigazione reattivo è uno di quei dettagli importanti che vuoi ottenere correttamente. Il più delle volte è la prima cosa che i tuoi utenti vedranno e con cui interagiranno su ogni pagina del tuo sito. Un menu dall'aspetto rotto può lasciare una brutta prima impressione. Spero che questo post ti aiuti a "spingerti" nella giusta direzione (mi dispiace non aver potuto trattenermi :)).

Sono sicuro che ci sono più problemi e soluzioni là fuori che non ho affrontato in questo post. Sentiti libero di pubblicarli nei commenti. Aspetto tue notizie.

Saluti!