Come rendere fisso il menu di Divi 3.0 da telefono

Come rendere fisso il menu di Divi 3.0 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 Divicome fissare il menu di Divi su telefono.

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!

Guide, tutorial, news

Ricevi ottime risorse per WordPress settimanalmente!

Articoli correlati

Commenti

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

  1. Ottimo Pascal, grazie mille! Ho inserito il codice CSS ed è tutto corretto.
    Un saluto, Igor

  2. Ciao Pascal, ho provato ad inserire il codice ma con il mega menu non mi permette di scrollare il menu. Con mega menù esiste un codice differente?

    1. Ciao Giovanni, sì con il mega menu può essere che faccia qualche conflitto di CSS, che tipo di errore ti da? Il sito è visibile? Prova a postare nella Divi Italian Community su Facebook nel caso.
      A presto e buon lavoro con Divi! 🙂

  3. Ciao Pascal.

    Grazie mille per i codici. Sono utilissimi è i passi facile di eseguire. Ho una domanda specifica: se il mio pulsante genitore ha il suo proprio link, cosa posso fare per attivarlo dopo avere inserito il codice? Perchè infatti, dopo avere inserito il codice, non posso accedere alle pagine genitori da mobile.

    Ti ringrazio in anticipo per la tua risposta.

    Saluti.

    Bravissimo questo blog.

    1. Ciao Melisa, grazie!
      Cosa intendi esattamente per pulsante genitore?
      Se intendi i link superiori nel menu mobile, mi sembra strano che non te li faccia cliccare.
      Hai per caso inserito anche il codice per raggruppare le voci del menu da mobile?