Introduzione
Per impostazione predefinita, il tema Divi mostra le stesse voci di menu sia nella versione desktop che in quella mobile del menu dell’intestazione (anche se con una formattazione diversa). In questo post ti spiego come nascondere determinati elementi dalla visualizzazione nel menu mobile, ad esempio facendoli apparire solo nel menu desktop.
Dalla dashboard di WordPress, vai su Aspetto> Menu e nel menu a discesa “Seleziona un menu da modificare:”, seleziona il menu contrassegnato come Menu principale. Ora dovresti vedere le voci di menu che compongono il menu nella tua intestazione.
Ora, in alto a destra dello schermo dovresti vedere una scheda “Opzioni schermo”. Fare clic su questo e selezionare la casella “Classi CSS”, come mostrato di seguito:
Ora aggiungi il seguente CSS al tuo sito:
@media only screen and (max-width: 981px) {
.desktop-menu-item { display: none; }
}
Ora, quando visualizzi il tuo sito, le voci di menu a cui è stata assegnata la classe CSS dovrebbero essere visualizzate nel menu del desktop, ma non nel menu del cellulare.
Se preferisci mostrare solo alcune voci di menu, puoi assegnare a tali elementi una classe CSS come sopra (potresti scegliere un nome di classe diverso, come “voce-menu-mobile” come faccio qui) e nascondere il resto con questo CSS:
@media only screen and (max-width: 981px) {
#mobile_menu li:not(.mobile-menu-item) {
display: none;
}
}
0 commenti