Come rendere fisso il menu di Divi 3.0 da telefono

da | Divi, Temi, Tutorial, Tutorial Divi, WordPress | 5 commenti

Rendere fisso menu tema Divi telefono smartphone mobile

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

Corsi online per imparare a usare WordPress al meglio.

Scopri la Imparaqui Academy

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!

Pascal Claro

Pascal Claro

Creatore di Imparaqui appassionato del tema WordPress Divi del page builder Elementor e entusiasta della community di WordPress, sempre alla ricerca di nuove strategie di comunicazione. Scopri tutti gli ultimi corsi online nella Imparaqui Academy!

Risorse consigliate

Sconti Tema Divi

Risorse WordPress

Imparaqui Academy

Commenta questo articolo

5 Commenti

  1. Igor

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

    Rispondi
  2. Giovanni Miele

    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?

    Rispondi
    • Pascal Claro

      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. Melisa García

    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.

    Rispondi
    • Pascal Claro

      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?

Invia un commento

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

Articoli correlati

Registra un nuovo account affiliato

 

👍

Riceverai una notifica da info@imparaqui.it quando il corso sarà online!

Se hai un abbonamento attivo alla Imparaqui Academy potrai accedere subito al corso.

Un saluto dal team di Imparaqui

Restiamo in contatto 👇