Come rendere fisso il menu di Divi da telefono

Come rendere fisso il menu di Divi sullo smartphone, in pochi passaggi avrai un menu fisso da telefono per il tuo sito fatto con Divi. Scopri tutta la procedura completa in questo tutorial.

Introduzione

In questo tutorial vediamo una funzione utilissima per tutti i siti creati con Divi: come fissare il menu di Divi su telefono.

Se cerchi di rendere fisso il menu creato con il Theme Builder di Divi 4.0, guarda il nostro nuovo tutorial »

In pochi passaggi potrai ottenere il tuo menu fisso anche su telefono e tablet, in modo da rendere più semplice la navigazione dei visitatori del tuo sito dai dispositivi mobili.

Indice dei contenuti

• Fissare il menu di Divi su mobile
• Rendere il menu fisso
• Rendere il menu scrollabile
• Conclusioni e Risorse

Fissare il menu di Divi su mobile

Per impostare il tuo menu fisso da telefono, ti basta seguire le semplici istruzioni che troverai di seguito e potrai avere anche tu un menu fisso su Divi.

Scrollando la pagina da mobile la barra del menu rimane fissa in alto, inoltre se hai un menu lungo potresti avere la necessità di attivare lo scrolling all’interno della tendina del menu da mobile, troverai anche questo nel tutorial che segue.

Un’altra cosa che potrebbe esserti utile se hai molte voci secondarie nel tuo menu, è quella di raggrupparli quando hai un menu mobile, guarda la nostra guida su come raggruppare il sub menu di Divi da telefono per scoprire come fare i pochi passaggi.

Pronti? Si comincia!

Rendere il menu fisso

Per rendere fisso il menu di Divi su mobile dovrai inserire una piccola riga di codice CSS nel tuo pannello di controllo di Divi.

Se non sai dove si trova il pannello di controllo di Divi ti basta andare nel backend di WordPress e cliccare sulla colonna di sinistra su “Divi” ti si aprirà in automatico il pannello delle opzioni del tema, se scorri in basso fino in fondo alla pagina troverai un box grigio con scritto “CSS personalizzato“.

A questo punto ti basta copiare le righe di codice che trovi qui sotto e inserirle così come sono nel box del “CSS personalizzato”.

Qui sotto trovi il codice CSS necessario:

@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
    position: fixed !important; 
} 
}

Bene hai inserito il codice CSS? Clicca su “Salva i cambiamenti“.

Ora se vai sul tuo sito puoi vedere che il menu di Divi rimane fisso in alto durante la navigazione, anche da telefono e tablet! Facile vero?

Rendere il menu scrollabile

Se il tuo menu contiene molte voci al suo interno e arriva fino in fondo alla schermata del telefono, ti potrebbe essere utile renderlo scrollabile.

Per farlo dovrai copiare la riga di codice qui sotto, sempre nel solito box del “CSS personalizzato”:

.et_mobile_menu {
    overflow: scroll !important;
    max-height: 83vh;
}

Clicca su “Salva i cambiamenti” e il gioco è fatto!

Conclusione

Se hai un menu con molte voci secondarie, ti consigliamo di vedere il nostro tutorial su come raggruppare le voci secondarie del menu di Divi da telefono.

Vuoi portare la creazione di siti con Divi ad un livello professionale? Scopri i nostri temi child e i corsi online dedicati a Divi nella Imparaqui Academy.

Se hai qualsiasi domanda non esitare a scrivere nei commenti e ricorda di iscriverti al gruppo Divi Italian Community per condividere la tua esperienza, richiedere consigli e conoscere altre persone che usano il tema Divi quotidianamente come te!