Come abbinare la barra dei menu desktop e mobile con Divi

Nel post Divi di oggi, condivideremo un rapido suggerimento che ti aiuterà a migliorare i tuoi progetti mobili. Sappiamo tutti che il tuo design su dispositivi mobili è importante tanto quanto lo è su desktop, ma a causa di alcune impostazioni standard all'interno di Divi, non tutte le modifiche apportate nella personalizzazione del tema hanno lo stesso aspetto sul desktop come sui dispositivi mobili.

Quello che faremo in questo post, in particolare, è mostrarti come creare una barra dei menu mobile più piccola che abbia lo stesso aspetto della barra dei menu sul desktop quando si utilizza l'altezza massima del logo e l'altezza minima del menu. Per impostazione predefinita, le prospettive su dispositivi mobili e desktop sono diverse. Solo perché hai impostato una certa altezza del menu e l'altezza massima del logo, non significa che lo stesso si applicherà ai dispositivi mobili.

La differenza per dispositivi mobili e desktop

Ci sono molti siti Web che scelgono deliberatamente di avere una barra dei menu principale con un'altezza non così elevata. Sembra solo più elegante e occupa meno spazio, cosa che è sicuramente interessante da considerare se stai usando anche la navigazione fissa.

Quando scegli il valore più alto per l'altezza massima del logo (che è 100) all'interno della personalizzazione del tema e il valore più basso dell'altezza del menu (che è 30), avrai il seguente risultato sul desktop:

Tuttavia, le proporzioni del logo e l'altezza del menu sono diverse per i dispositivi mobili. Se hai selezionato il valore più alto per l'altezza massima del logo e il valore più basso per l'altezza del menu, non otterrai lo stesso risultato che hai sul desktop. Il risultato che otterrai sarà, invece, simile a questo:

Risultato

Ora, quello che faremo è mostrarti come applicare lo stesso layout alla barra dei menu del tuo cellulare. Ciò significa che il logo avrà la sua altezza massima nel menu. Oltre a ciò, la barra dei menu stessa sarà molto più piccola. Alla fine, avrai più spazio sullo schermo per visualizzare il contenuto della tua pagina.

Dopo aver seguito passo passo questo tutorial, otterrai il seguente risultato:

Che ovviamente assomiglia di più alla versione desktop:

Come abbinare la barra dei menu desktop e mobile con Divi

Iscriviti al nostro canale Youtube

Impostazioni della barra dei menu principale

La prima cosa che faremo è apportare le modifiche necessarie alla barra dei menu principale all'interno della personalizzazione del tema. Se sei nella dashboard di WordPress, vai su Aspetto > Personalizza > Intestazione e navigazione > Barra dei menu principale e assicurati che siano applicate le seguenti impostazioni:

• Nascondi immagine logo: Disattiva
• Altezza del menu: 30
• Altezza massima del logo: 100

Barra dei menu mobile Codice CSS aggiuntivo

La prossima cosa che dovremo fare è aggiungere del codice CSS aggiuntivo per far apparire la barra dei menu mobile allo stesso modo della barra dei menu sul desktop. Possiamo scegliere di aggiungere il codice CSS ad una pagina in particolare (se vogliamo solo mostrare il menu in quel modo solo su determinate pagine) o all'intero sito. In genere, applicherai il codice CSS all'intero sito Web per mantenere la coerenza necessaria sul tuo sito Web, ma dipende da te.

Aggiungi codice CSS a una pagina in particolare

Per aggiungere il codice CSS a una pagina in particolare, dovrai aprire la pagina nella dashboard di WordPress. Durante l'utilizzo del generatore Divi, dovrai fare clic sulla seguente icona al suo interno:

Successivamente, puoi prendere le seguenti righe di codice CSS e inserirle nel campo CSS personalizzato:

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

Aggiungi il codice CSS all'intero sito web

L'altra possibilità, e probabilmente quella che verrà utilizzata di più, è aggiungere il codice all'intero sito web. Ci sono due modi per farlo.

Attraverso il personalizzatore del tema

Il primo metodo consiste nell'aggiungere il codice CSS al tuo personalizzatore di temi. Per farlo, vai alla dashboard di WordPress > Aspetto > Personalizza > CSS aggiuntivo > Inserisci le seguenti righe di codice CSS nel campo CSS personalizzato:

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

Questa opzione ti consente di vedere le modifiche in tempo reale. Questa è probabilmente la scelta più interessante se hai intenzione di modificare alcune cose nel codice e vuoi vedere come appare prima di salvare le modifiche.

Attraverso le opzioni del tema

Il secondo metodo consiste nell'aggiungere il codice CSS alle Opzioni del tema. Per farlo, vai alla dashboard di WordPress > Divi > Opzioni del tema > Scorri verso il basso la scheda Generale e inserisci il seguente codice CSS nel campo CSS personalizzato:

@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 il codice secondo le tue preferenze

Ovviamente, questo non è l'unico modo in cui puoi far sembrare la barra dei menu mobile. Se stai applicando impostazioni diverse alla barra dei menu principale nella personalizzazione del tema, è molto probabile che dovrai apportare le modifiche anche all'interno del codice CSS. Tuttavia, le classi CSS e gli ID CSS che utilizzerai sono gli stessi.

Una delle cose che dovrai sicuramente prendere in considerazione, tuttavia, è il riempimento superiore del contenitore della pagina. Il valore che abbiamo assegnato nel nostro codice CSS corrisponde alle altre modifiche che abbiamo apportato. Tuttavia, se cambi i valori nelle altre classi, dovrai assicurarti che il padding superiore rimanga corretto. Il modo più semplice per farlo è iniziare con un valore più alto e modificare il valore finché non si osserva il contenitore della pagina che si posiziona.

Risultato

Se hai seguito questo tutorial passo dopo passo, dovresti essere in grado di ottenere il seguente risultato per la barra dei menu del tuo cellulare:

Che sembra quasi esattamente lo stesso del risultato che ottieni sui desktop:

Prima di apportare modifiche CSS, il risultato su Mobile è simile a questo:

Pensieri finali

In questo post, ti abbiamo mostrato come ridurre la barra dei menu del tuo dispositivo mobile e adattarla alla barra dei menu sui desktop. Puoi semplicemente aggiungere il codice CSS necessario a una pagina in particolare o all'intero sito Web per far funzionare questo metodo. Se hai domande o suggerimenti; assicurati di lasciare un commento nella sezione commenti qui sotto!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!