Questo potrebbe essere risolto anche in altri modi.
Con CSS, la regola CSS più importante è:
.offcanvas-menu .offcanvas-inner .sp-module ul > li ul.menu-child {
display: initial;
}
Che è responsabile della visualizzazione di base.
Ho provato ad aggiungere alcune regole aggiuntive per ottenere uno stile più leggibile e cliccabile.
Aggiunge più spazio per il testo della voce di menu sul lato destro, rimuove i pulsanti +, aggiunge più spaziatura interna tra le voci, aggiunge più spaziatura interna per tutte le voci del menu figlio.
Copia le seguenti righe nelle impostazioni dello stile del modello -> codice personalizzato -> CSS personalizzato
oppure utilizza il file custom.css esterno.
.offcanvas-menu .offcanvas-inner {
padding-right: 0;
}
.offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > a > .menu-toggler, .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > .menu-separator > .menu-toggler {
display: none;
}
body.ltr .offcanvas-menu .offcanvas-inner .sp-module ul > li ul {
margin-left: 0;
}
.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li {
padding: 0.25rem 0;
}
.offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-deeper.menu-parent {
padding-bottom: 0.5rem;
}
.offcanvas-menu .offcanvas-inner .sp-module ul > li ul.menu-child {
display: initial;
}
.offcanvas-menu .offcanvas-inner .sp-module ul.menu-child > li {
padding-top: 0.5rem;
padding-left: 1.1rem;
}