Avada sfrutta una tipologia di elemento chiamato MegaMenu per creare menu desktop ampi e con grafiche personalizzate. Uno strumento molto interessante che permette di gestire al massimo del potenziale le informative sul menu.

Il problema sta che gli elementi di MegaMenu non sono visibili se impostiamo che il menu diventi Mobile. Ma c’è una soluzione molto facile al problema:

Questo è un esempio di MegaMenu

Al cliccare sul link del menu, apre una tendina con varie informazioni

Questo è invece l’esempio di un MegaMenu con l’opzione di chiusura mobile

Come potete notare dall’icona delle lineette menu si apre un menu classico che non ha nessun riferimento al Mega menu!

1_Creiamo Il Mega menu mobile – ovvero OFFCanvas

Dobbiamo gestire il progetto creando un altro Menu tutto nuovo. Per non dover modificare ogni volta più menu: si consiglia di gestire i contenuti con Singoli Menu separati, visibili nei Mega menu, in questo modo si cambierà solo il classico elemento del menu in wordpress e verrà modificato in entrambi i Mega menu (quello desktop e quello mobile).

Dobbiamo dunque prima di tutto creare un Mega menu Mobile con sidebar laterale che si aprirà dal lato.

Andiamo su AVADA -> off-cavas -> creiamo un nuovo layout off cavas e editiamolo in live builder

Il menu avada “off-cavas” non è presente (appena dopo il pulsante layouts) ?

E’ solo necessario attivarlo in OPZIONI GLOBALI -> nel sotto menu “Avanzate” -> Post Type -> e abilitare gli “Avada Off Canvas”

Nel nostro Live Builder creiamo quello che potrebbe sembrare un menu mobile. Segui la guida Avada sugli off canvas per impostare correttamente il layout. Ricordati di impostare la visuale in modalità MOBILE nel Live Builder, per avere un idea delle forme.

2_Agganciamo off canvas a un Menu WordPress

Il secondo passaggio sarà quello di agganciare off canvas appena creato a un menu WP che sarà poi richiamato nel header:

In WP Menu in admin, al link Aspetto -> MENU: creare un nuovo Menu con il nome che preferiamo. Poi, come unico elemento del menu impostare dal tipo di elemento (sono il lista come pagine,post…) “Avada Special Menu Items” e aggiungere il modello: “Off Canvas Toggle”.

Aggiungere 2 comandi chiave con le opzioni avada dei menu: ICONA, che sarà quella poi visibile nel nostro header, e “Abilita solo Icona” che ci permetterà di avere solo l’immagine dell’icona nel box che vogliamo usare come apertura del menu off cavans in mobile. E’ possibile comunque usare il testo a lato dell’icona e altre impostazioni grafiche se vogliamo.

3_ Mostriamo il nostro Menu offCanvas nel Header

L’ultimo passaggio da fare è inserire il menu offCanvas creato nel nostro Header e impostarlo visibile solo in Mobile e Tablet (eventualmente).

Nel nostro Header, a fianco del elemento del Menu normale, aggiungere un altro elemento Menu. In questo nuovo elemento selezionare come Menu quello sopra creato che ha l’oggetto “Off Canvas Toggle”.

Importante disattivare da questo menu l’opzione di chiusura per i mobile : Mobile -> Collapse to Mobile Breakpoint (da impostare sulla X).

Adesso avremo 2 box Menu: uno per il desktop e l’altro per il Mobile. Sarà necessario impostare nel menu per il desktop solo la visibilità a desktop e togliere la visibilità Mobile e Tablet. Viceversa nel menu per il Mobile impostare solo Mobile e Tablet e togliere Desktop.

La procedura ora è finita e si avranno 2 mega menu visibili con strutture diverse tra desktop e mobile