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 fammelo sapere nei commenti qua sotto.
