Come creare un menu a tendina per la versione mobile Divi

Nelle impostazioni di default del tema Divi, il menu che ha dei sottoelementi non viene racchiuso in una tendina. Vediamo come trovare una soluzione.

Introduzione

Ci sono varie possibilità per migliorare il menu Divi nella versione mobile. Per evitare confusione, in questo post parleremo soltanto del menu standard e non del menu come modulo. Usando il codice CSS infatti è possibile modificare gran parte del menu e renderlo il più adatto possibile ai dispositivi mobili come smartphone e tablet. Abbiamo raccolto qua sotto una lista di codici utili a rendere il menu Divi più bello e funzionale.

Per questa guida potrebbe esserti utile il post: come aggiungere codice CSS al tema Divi.
Menu raggruppato mobile Divi

1. Creare un menu raggrupato

Grazie a un codice CSS e un codice JS è possibile comprimere le voci del sottomenu nel tema Divi in versione mobile e creare un menu cosìdetto, raggruppato, appunto.
Nelle impostazioni di default le voci del sottomenu appaiono tutte elencate creando un menu troppo lungo e disordinato.
Prima di arrivare a questa soluzione ho provato molti codici e quello funzionante per ora è di Garconis.

Andiamo ora nei dettagli e vediamo in due passaggi come creare l’effetto del menu raggruppato in versione mobile.

Procediamo prima con il codice CSS che va copiato dal box sottostante e incollato in Divi > Opzioni Tema > Generale > Codice CSS personalizzato.

/* -- HEADER -- */

/* remove pointer event from menu module mobile wrapper */
.et_pb_module.et_pb_menu .et_mobile_nav_menu {
	pointer-events: none;
}

/* make menu module hamburger icon and menu links interactive again */
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_menu_bar,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .et_mobile_menu li a {
	pointer-events: auto;
}

/* when mobile menu is open, change hamburger icon to x icon */
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
	content: '\4d';
}

/* make desktop sub sub menu icon be right arrow instead of down arrow */
#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after, 
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after,
.et_pb_module.et_pb_menu .et-menu .menu-item-has-children .menu-item-has-children > a:first-child::after {
	content: '5';	
}

/* if mobile parent link of child menu is a deadlink, then make it not clickable */
#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a[href="#0"],
.et_pb_module.et_pb_menu .et_mobile_menu .menu-item-has-children > a[href="#0"] { 
	pointer-events: none;
}

/* - mobile menu toggling elements, injected via jQuery - */

/* make menu list item be relative, to be able to position toggle within this item */
#main-header #mobile_menu.et_mobile_menu .menu-item-has-children,
.et_pb_module.et_pb_menu .et_mobile_menu .menu-item-has-children {
	position: relative;	
}
/* the new toggle element, which is added via jQuery */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle,
.et_pb_module.et_pb_menu .et_mobile_menu .sub-menu-toggle {
	position: absolute;
	background-color: rgba(0,0,0,0.03);
	z-index: 1;
	width: 36px;
	height: 36px;
	line-height: 36px;
	border-radius: 50%;
	top: 4px;
	right: 4px;
	cursor: pointer;
	text-align: center;
	pointer-events: auto;
}
/* the new toggle element when popped */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped,
.et_pb_module.et_pb_menu .et_mobile_menu .sub-menu-toggle.popped {
	background-color: rgba(0,0,0,0.1);
}
/* toggle icon */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before,
.et_pb_module.et_pb_menu .et_mobile_menu .sub-menu-toggle::before {
	font-family: "ETmodules" !important;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 36px;
	font-size: 24px;
	text-transform: none;
	speak: none;
	content: '\33';
}
/* toggle icon when triggered */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before,
.et_pb_module.et_pb_menu .et_mobile_menu .sub-menu-toggle.popped::before {
	content: '\32';
}
/* hide sub menus by default */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu,
.et_pb_module.et_pb_menu .et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
	display: none !important;
	padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu,
.et_pb_module.et_pb_menu .et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
	display: block !important;
	background-color: rgba(0,0,0,0.03) !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */
#main-header #mobile_menu.et_mobile_menu li li,
.et_pb_module.et_pb_menu .et_mobile_menu li li {
	padding-left: 0;
}

/* adjust mobile menu anchors side paddings */
#main-header #mobile_menu.et_mobile_menu li a,
.et_pb_module.et_pb_menu .et_mobile_menu li a {
	padding-left: 20px;
	padding-right: 20px;
}
/* indent sub menu */
#main-header #mobile_menu.et_mobile_menu li li a,
.et_pb_module.et_pb_menu .et_mobile_menu li li a {
	padding-left: 40px;
	padding-right: 20px;
}
/* indent sub sub menus further */
#main-header #mobile_menu.et_mobile_menu li li li a,
.et_pb_module.et_pb_menu .et_mobile_menu li li li a {
	padding-left: 60px;
	padding-right: 20px;
}
/* if mobile menu anchor has toggle, make room for it to fit next to the link */
#main-header #mobile_menu.et_mobile_menu .menu-item-has-children .sub-menu-toggle + a,
.et_pb_module.et_pb_menu .et_mobile_menu .menu-item-has-children .sub-menu-toggle + a {
	padding-right: 44px;
}

/* - end mobile menu toggling elements - */

/* undo Divi's default styling of mobile menu links that have children */
#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a,
.et_pb_module.et_pb_menu .et_mobile_menu .menu-item-has-children > a {
	background-color: transparent;
	font-weight: inherit;
}

/* make the current page's mobile menu link be different */
#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a,
.et_pb_module.et_pb_menu .et_mobile_menu li.current-menu-item > a {
	font-weight: bolder;
}

/* -- END HEADER -- */

Nel secondo passaggio invece dovrai copiare e incollare il codice JS (Javascript) (anche questo essenziale per ottenere il risultato del menu raggrupato su mobile) in Divi > Opzioni Tema > Integrazione > Aggiungi codice a < head > del tuo blog.

<script>jQuery( document ).ready( function( $ ) {
	
	$(document).ready(function () {
		// Create collapsible sub menus in mobile Divi Header Nav
		$( '' ).insertBefore( '#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a' );
		// Create collapsible sub menus in mobile Divi Theme Builder Menu
		$( '' ).insertBefore( '.et_pb_module .et_mobile_menu .menu-item-has-children > a' );


		// Toggle the class to be popped on mobile Divi Header Nav
		$( '#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle' ).click(function () {
			$(this).toggleClass('popped');
		});
		// Toggle the class to be popped on mobile Divi Theme Builder Menu
		$( '.et_pb_module .et_mobile_menu .sub-menu-toggle' ).click(function () {
			$(this).toggleClass('popped');
		});
		// Replace the mobile Divi Theme Builder Menu toggle with different href other than # hash, to prevent scroll to top on sub-menu-toggle clicks
		$( '.et_pb_module a.mobile_nav[href="#"]' ).attr( 'href', '#0' );
	});
} );</script>

2. Rendere il menu scrollabile

Purtroppo Divi presenta alcune limitazioni per quanto riguarda il menù da mobile. Ad esempio, se avete un menù a tendina con dei sottomenù, nella versione mobile non riuscirai a scrollare più in basso con il dito. Quindi occorre rendere il menù scrollabile. Per fare questo ti basterà copiare e incollare un breve codice CSS in Divi > Opzioni Tema > Generale > Codice CSS personalizzato.

.et_mobile_menu {
overflow: scroll !important;
max-height: 84vh; /*edit this to match your view height*/
box-shadow: 0px 0px 30px rgba(0,0,0,0.3) /*just some box shadow for nicer menu, you can skip this*/
}

3. Rendere il menu fisso

Questa opzione è presente nelle impostazioni di Divi ma è valida solo per la versione desktop del vostro sito.
Per rendere il menu fisso anche da mobile dovrete aggiungere le seguenti righe di codice CSS al vostro tema Divi.

/* Fixed Navigation Bar on mobile devices */
@media screen and (max-width: 980px) {
    #main-header.et-fixed-header {
        position: fixed;
    }
	
    .logged-in #main-header.et-fixed-header {
        top: 0 !important;
	transition: all .3s 0s;
    }
}

4. Centrare il testo nel menu

In varie occasioni potresti avere necessità di centrare le voci del menu per dare un effetto più carino e ordinato. Per ottenere questo effetto dovrai usare un breve codice CSS.

.et_mobile_menu li a {
text-align: center;
}

Spesso le dimensioni standard del logo da mobile in Divi sono troppe ridottte e ci capita spesso di dover trovare una soluzione a questo problema. Puoi usare il seguente codice per modificare le dimensioni del tuo logo in Divi. Non dovrai far altro che cambiare la percentuale con quella desiderata.

@media only screen and (max-width: 767px) {
    body header img#logo {
        max-width: 80%!important;
        max-height: 80%!important;
        height: auto!important;
        width: auto!important;
    }
}

Conclusione

Tutti i codici presenti in questo articolo dovrebbero aiutarti a creare un menu Divi completo e funzionale per la versione mobile del tuo sito WordPress. Se hai dubbi, domande o per qualsiasi richiesta, faccelo sapere nei commenti.

Mostra/Nascondi Commenti (3 commenti)
L

3 Commenti

  1. Buon giorno,

    ho cercato di fare tutto come indicato ma non funziona.
    Dove posso aver sbagliato?

    Grazie!

    Rispondi
    • Ho capito l’errore, adesso funziona.
      Grazie!

      Rispondi
      • Ciao Ermanno! Ok perfetto 🙂

        Rispondi

Invia un commento

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

Ti potrebbe anche interessare…

Cambiare Modulo Blog Divi
Mar 10 2023

Cambiare il modulo Blog Divi per avere immagine a sinistra e testo a destra

Oggi voglio condividere con voi come è possibile creare un blog Divi con immagine a sinistra e testo a destra usando il layout a larghezza piena.
Immagine con titolo di un articolo su come aggiungere anno di copyright con aggiornamento automatico
Mar 09 2023

Come aggiungere anno di copyright con aggiornamento automatico

Questa soluzione ti permette di aggiungere un anno di copyright con aggiornamento automatico in fondo al tuo sito web senza dover scrivere codice.
Come aggiungere le icone Divi con il codice CSS
Mar 06 2023

Come aggiungere le icone Divi con il codice CSS

In questo post ti spiegherò come è possibile aggiungere le icone Divi con il codice CSS ovunque tu voglia nel tuo sito.
Immagine con titolo di un articolo su come disabilitare lo scroll orizzontale nel tema Divi
Mar 06 2023

Come disabilitare lo scroll orizzontale nel tema Divi

In questo post ti mostrerò come disabilitare lo scroll orizzontale nel tema Divi e migliorare l’esperienza utente.
Immagine con titolo di un articolo su come nascondere il Divi header e footer in pagine specifiche del sito WordPress
Mar 02 2023

Come nascondere header e footer in pagine specifiche di un sito Divi

In questo post ti spiegherò come nascondere header e footer in pagine specifiche di un sito Divi.
Illustrazione di un modulo contatto con asterischi per siti WordPress
Feb 18 2023

Aggiungere gli asterischi nei campi obbligatori del modulo di contatto Divi

In questa breve guida ti spieghiamo come aggiungere gli asterischi nei campi obbligatori del modulo di contatto Divi.
Mano con strumento per risolvere problemi del tema Divi
Feb 17 2023

Risolvere i problemi più comuni del tema Divi

Ti potrebbe capitare che il tema Divi non funziona correttamente. Non preoccuparti, in questo post imparerai come risolvere i problemi più comuni.
Persona in procinto di accendere un laptop
Dic 21 2022

Come scrivere articoli per il tuo blog di WordPress

In questo articolo vi raccontiamo come scrivere articoli efficaci per i blog di WordPress e perchè è importante farlo.
Persona che guarda un computer fisso alla scrivania
Dic 21 2022

Come ottimizzare la homepage del tuo sito web

Se sei alla ricerca del metodo più efficace per ottimizzare pagine, in questo post ti spiego come è possibile farlo.
Laptop con pagina sul backend di WordPress
Dic 15 2022

Come installare un plugin su WordPress

Installare un plugin su Wordpress è qualcosa che si deve assolutamente sapere per integrare nuove funzionalità al tuo sito Web.

Layout Divi

Scopri un’ampia collezione di layout Divi in continuo aggiornamento.

Membership

Benvenuto nel club segreto dei web designer! Uno spazio riservato a chi ha scoperto i vantaggi dei layout Divi per creare siti web moderni e professionali.

N 80+ Layout Divi
N Licenza Lifetime
N Download illimitati
N Documentazione
N SUPPORTO VIA EMAIL

69,00 €

Licenza Lifetime. Possibilità di utilizzare tutti i layout Divi per sempre.

Divi Logo

Tema Divi

Il più potente e accessibile dei temi WordPress è disponibile anche in italiano!

Divi Builder