Come creare un menu a tendina per la versione mobile Divi
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.
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;
}5. Cambiare le dimensioni del logo
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.
Buon giorno,
ho cercato di fare tutto come indicato ma non funziona.
Dove posso aver sbagliato?
Grazie!
Ho capito l’errore, adesso funziona.
Grazie!
Ciao Ermanno! Ok perfetto 🙂
Buon giorno,
ho cercato di fare tutto come indicato ma non funziona.
Dove posso aver sbagliato?
Grazie!