Come nascondere un link del menu da dispositivi mobili

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.

Aggiungi una classe CSS alla voce di menu

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, nel menu principale che hai appena selezionato dal menu a discesa, individua l’elemento che desideri nascondere. Fai clic su di esso per espandere le sue opzioni e dovresti vedere un campo “CSS Classes (Optional)”. Inserisci “desktop-menu-item” in questa casella. Questo aggiungerà una classe CSS alla voce di menu che useremo accanto per nascondere gli elementi sul cellulare. Se desideri nascondere più di un elemento, ripeti il ​​processo per altri elementi, inserendo ogni volta la stessa classe CSS (ad esempio “elemento del menu del desktop”). Salva il menu.

Nascondi le voci di menu

Ora aggiungi il seguente CSS al tuo sito:

Puoi aggiungere quel CSS alla fine della casella “Divi> Opzioni tema> Generale> CSS personalizzato” o nel file style.css di un tema figlio.
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.

Mostra voci di menu con una classe CSS

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: