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.

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.

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.