Esplora corsi
Accedi a tutti i corsi
€ 75 / 3 mesi
Accesso senza limiti a tutti i corsi online di imparaqui.it
Stai per richiedere la pubblicazione del tuo corso su imparaqui.
Il team effettuerà un controllo qualitativo e verificherà che i contenuti siano in linea con l'offerta della piattaforma.
Se il corso viene approvato riceverai un messaggio di conferma via email e potrai subito condividerlo e iniziare ad accumulare le commissioni mensili.
Se non ricevi il messaggio di conferma entro 10 giorni lavorativi significa che il corso non è stato approvato.
Pubblica il tuo corsoStrumenti WordPress da non perdere 👉 scopri i miei consigli.
In questo tutorial per il tema WordPress Divi di Elegant Themes vediamo come raggruppare le voci secondarie del menu mobile.
Se il menu del tuo sito creato con Divi contiene diverse voci secondarie potresti avere la necessità di raggrupparle quando l’utente accede al menu da smartphone o da tablet.
Se la tua licenza Divi è scaduta ti ricordiamo che puoi usare gli sconti speciali per il rinnovo della licenza annuale di Divi o per il passaggio alla licenza lifetime.
Indice dei contenuti
Questa procedura disattiverà i link primari, per esempio nella foto qui sotto, il link “Tutorial” è disattivato, infatti toccandolo si apre il relativo sotto-menu.
Questo accadrà ovviamente solo da mobile, da desktop tutto resterà invariato.
Segui i passaggi con attenzione e se hai bisogno scrivi nei commenti.
Non spaventarti, è più semplice di quello che sembra, ti basterà andare sul pannello di controllo di Divi cliccando dal backend di WordPress nella colonna di sinistra su “Divi” e poi cliccando su “Integrazione” come vedi qui sotto.
Scorri in basso e copia il codice che trovi qui sotto nel box dove c’è scritto “Aggiungi codice al < body > (ottimo per codici di monitoraggio come Google Analytics)”.
<!-- INIZIO CODICE RAGGRUPPAMENTO MENU MOBILE -->
<style type="text/css">
#main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; }
#main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }
</style>
<script type="text/javascript">
(function($) {
function setup_collapsible_submenus() {
var $menu = $('#mobile_menu'),
top_level_link = '#mobile_menu .menu-item-has-children > a';
$menu.find('a').each(function() {
$(this).off('click');
if ( $(this).is(top_level_link) ) {
$(this).attr('href', '#');
}
if ( ! $(this).siblings('.sub-menu').length ) {
$(this).on('click', function(event) {
$(this).parents('.mobile_nav').trigger('click');
});
} else {
$(this).on('click', function(event) {
event.preventDefault();
$(this).parent().toggleClass('visible');
});
}
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>
<!-- FINE CODICE RAGGRUPPAMENTO MENU MOBILE -->
clicca su “Salva i cambiamenti” e abbiamo finito! Adesso se vai a vedere il tuo menu sarà finalmente raggruppato!
In questo tutorial Divi di imparaqui.it abbiamo visto come raggruppare le voci secondarie nel menu mobile di Divi. Hai in mente un nuovo tutorial? Segnalalo alla community da questa pagina » prossimi tutorial Divi.
Scrivi nei commenti in fondo al post se hai bisogno di altre informazioni o se non riesci a seguire alcuni dei passaggi.
Se vuoi portare la creazione di siti con Divi ad un livello professionale ti invitiamo a scoprire i nostri corsi online dedicati a Divi nella Imparaqui Academy.
Ricorda di iscriverti al gruppo facebook Divi Italian Community per condividere la tua esperienza, richiedere consigli e conoscere altre persone che usano il tema Divi quotidianamente come te.
Accedi immediatamente a tutti i corsi e alla community di imparaqui, senza limiti.
Intanto grazie per questo codice che trovo molto utile, unico e “grosso” problema che i titoli delle pagine base non si aprono più (da mobile ovviamente).
Nei miei siti esempio la pagina prodotti raggruppa un elenco di tutti i prodotti, poi entrando nelle sottopagine li evidenzio uno ad uno.
Come è possibile fare funzionare/aprire anche le pagine principali da menù a tendina mobile?
Grazie
Buongorno mi chiamo Davide, il menù funziona ma per aprire le i sotomenù a fianco ci sono delle “L” invece che la “X”, per chiuderlo invece tutto ok
Premetto che Il mio menù è costruito con il builder quindi innescato nelle pagine tramite intestazione globale, ma questo tutorial non funziona
Salve amici di Imparaqui.
HO seguito passo passo come descritto nell’articolo, ma i menu sono sempre aperti
Ciao Pascal, può essere che il codice pubblicato in questo articolo non funzioni più con i global header del Theme Builder?
Da quanto ho iniziato ad usarli nel mio sito i menu mobile non raggruppano più le voci secondarie
Ciao Nicola, certo, è probabile che i codici non vadano con il global header, dovrebbero funzionare senza problemi se usi l’header di default di Divi. Se troviamo delle soluzioni alternative le posteremo senz’altro 😉
Ho inserito il codice ma il raggruppamento non avviene subito ma solo se si clicca su una pagina del menu, ma poi tornando alla home le voci sono ancora tutte visibili
ho provato ad inserire il codice il problema che il menù che ho inserito in una sola pagina specifica è inserito in una sezione a tutta lunghezza quindi mi occorrerebbe un codice specifico )nelle altre pagine del sito c’è un menù generale che regola tutto il sito
Buongiorno Riccardo, il codice che trovi in questo tutorial è fatto per gestire il comportamento del menu generale di Divi. Hai già provato ad inserirlo nel pannello delle opzioni di Divi nella sezione Integration » “Aggiungi codice al body” e vedere se è efficace anche per il menu sulla tua pagina specifica? Nel caso non lo fosse dovresti provare a scrivere al team di Elegant Themes facendo riferimento a questo articolo » https://www.elegantthemes.com/blog/community/divi-mobile-menu-hack-collapsing-nested-sub-menu-items e spiegando che ti servirebbe adattarlo per una singola pagina.