Raggruppare le voci secondarie del menu di Divi da mobile

Come raggruppare le voci secondarie del menu di Divi da telefono, segui il nostro tutorial per organizzare al meglio il menu mobile dei siti fatti con Divi.

Come raggruppare le voci secondarie del menu di Divi da telefono, segui il nostro tutorial per organizzare al meglio il menu mobile dei siti fatti con Divi.

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

  • Info prima di iniziare
  • Inserire il codice nel body
  • Conclusioni

Indicazioni prima di iniziare

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.

raggruppare-voci-secondarie-menu-divi-esempio

Inserire il codice nel body

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!

Conclusioni

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.

CONDIVIDI
Default image
Pascal Claro
Esperto WordPress, YouTuber, Marketer, Cantautore, Poeta, Creativo. Ho fondato e gestisco la scuola online imparaqui.it dove puoi trovare numerosi corsi online per potenziare business, creatività e lifestyle. Ti consiglio di iscriverti alla newsletter di imparaqui per ricevere tutti gli aggiornamenti importanti!

8 commenti

  1. 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

  2. Premetto che Il mio menù è costruito con il builder quindi innescato nelle pagine tramite intestazione globale, ma questo tutorial non funziona

  3. 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 😉

  4. 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

  5. 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

Scrivi un commento

Sblocca l'accesso a centinaia di lezioni online

Accedi immediatamente a tutti i corsi e alla community di imparaqui, senza limiti.

Domande frequenti

Come funziona l’accesso ai corsi di imparaqui?

Attivando l’abbonamento trimestrale o annuale a imparaqui puoi accedere a tutti i corsi presenti sul sito senza alcun limite. Mantenendo attivo il tuo abbonamento puoi continuare a seguire tutti i corsi, incluse le nuove uscite. Se decidi di interrompere il rinnovo automatico dell’abbonamento, alla scadenza del periodo di iscrizione perdi l’accesso a tutti i corsi. Puoi disattivare o riattivare l’abbonamento a imparaqui direttamente dal tuo account, in qualsiasi momento.

Posso ricevere fattura?

Sì, per ogni acquisto è possibile inserire i propri dati aziendali e scaricare dal proprio account il pdf della fattura che viene generata automaticamente. imparaqui è un’azienda con sede in Francia, i dati aziendali completi, incluso il numero di partita IVA intracomunitario, sono reperibili nel piè di pagina del sito.

Posso disattivare il rinnovo automatico dell’abbonamento?

Sì, puoi disattivare il rinnovo automatico dell’abbonamento in qualsiasi momento direttamente dal tuo account nella sezione dedicata alla gestione dell’abbonamento.

Quali metodi di pagamento posso usare per iscrivermi?

Puoi pagare con Carta di credito (tramite il servizio sicuro internazionale fornito da Stripe) oppure con PayPal.

È possibile scaricare le video lezioni o avere un accesso a vita ai corsi?

No, attualmente non offriamo questa opzione. Mantenendo attivo l’abbonamento a imparaqui si può accedere a tutti i video corsi senza limiti e da qualsiasi dispositivo.

Cosa contengono i corsi online di imparaqui?

I corsi online di imparaqui sono strutturati in video lezioni e sono arricchiti da materiale utile come link, codice, pdf, immagini, template, ecc. Le video lezioni e il materiale annesso sono accessibili 24 ore su 24 senza limiti e da qualsiasi dispositivo.

I corsi online di imparaqui sono sempre aggiornati?

I nostri insegnanti fanno del loro meglio per mantenere aggiornati e funzionali tutti i corsi di imparaqui. È da tenere presente, tuttavia, che imparaqui non garantisce l’aggiornamento dei corsi della piattaforma, e che l’utente accetta di poter trovare errori e/o parti non aggiornate.

Offrite un servizio di assistenza?

No, non offriamo un servizio di assistenza. Puoi postare eventuali domande o condividere la tua esperienza con gli insegnanti e con la community scrivendo direttamente nella sezione commenti presente sotto a ogni corso. È da tenere presente, inoltre, che i nostri insegnanti non sono tenuti a rispondere per forza o a fornire consulenze o assistenza attraverso la community.

Avete una garanzia di rimborso?

Sì, offriamo una garanzia di rimborso. Nel caso in cui i corsi online di imparaqui non dovessero soddisfare a pieno le tue aspettative, puoi contattarci e richiedere un rimborso. Le condizioni da rispettare per poter ricevere il rimborso sono:

  1. Non aver visionato più del 20% per ogni singolo corso su imparaqui.
  2. Inviare la richiesta di rimborso entro e non oltre 14 giorni dalla data di iscrizione a imparaqui.

Un ulteriore caso in cui viene effettuato il rimborso è legato al rinnovo automatico involontario (per dimenticanza di disattivazione), in questo caso il rimborso deve essere richiesto entro 5 giorni dalla data del rinnovo e senza aver visionato nessun corso nel periodo successivo al rinnovo.

Ho altre domande…

Per qualsiasi altra informazione puoi contattarci da questa pagina. Il team sarà felice di rispondere il prima possibile.