Come nascondere un link del menu da dispositivi mobili

In questo post ti spiego come nascondere determinati elementi dalla visualizzazione nel menu mobile e mostrarli solo su Desktop.

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:

Opzioni Menu
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.
Classe CSS Menu

Nascondi le voci di menu

Ora aggiungi il seguente CSS al tuo sito:

@media only screen and (max-width: 981px) {
.desktop-menu-item { display: none; }
}

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:

@media only screen and (max-width: 981px) {
#mobile_menu li:not(.mobile-menu-item) {
display: none;
}
}

Mostra/Nascondi Commenti (0 commenti)
L

0 commenti

Invia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ti potrebbe anche interessare…

Nov 17 2022

Come aggiungere le icone Font Awesome al tema Divi

In questo post ti mostro come aggiungere icone Font Awesome al tuo sito WordPress con un plugin o integrando manualmente con Divi.
Ottimizzare le immagini per la SEO
Nov 15 2022

Come ottimizzare le immagini per la SEO in Divi

Scopri come ottimizzare le immagini del tuo sito Divi in ottica SEO in questa guida passo dopo passo!
Modulo Divi Blur
Nov 14 2022

Come spostare il titolo del modulo Divi Blur sopra l’immagine

Oggi ti mostrerò come spostare il titolo del modulo Divi Blurb sopra l’immagine grazie a un frammento di codice.
Icone Social Mobile Divi
Mag 11 2022

Mostrare le icone social nell’header Divi da mobile

In questo post scoprirai un semplice trucchetto per abilitare le icone social nell’header Divi da mobile.
Video Vimeo Modulo
Mag 08 2022

Come incorporare Vimeo nel modulo video di Divi

In questo articolo ti mostro come inserire correttamente un video Vimeo nel modulo video di Divi.
Protezione attacchi sito Wordpress
Apr 21 2022

Verificare la presenza di malware nel tuo sito WordPress

In questo post conoscerai alcuni strumenti per verificare se il tuo sito è affetto da malware e come mantenerlo protetto da attacchi hacker.
Sosituire Icona Hamburger Divi
Feb 18 2022

Come sostituire l’icona hamburger per mobile nel tema Divi

In questa breve guida imparerai a sostituire l’icona hamburger standard di Divi per dispositivi mobili come cellulari e tablet.
Feb 15 2022

Come disabilitare l’uso di una password forte in WooCommerce

È importante disabilitare l’uso di password complesse in WooCommerce per non indurre gli utenti ad abbandonare la fase di checkout.
Disabilitare IMG title
Feb 12 2022

Come ottimizzare gli attributi img alt e img title per la SEO

Ecco una breve guida sugli attributi img alt e img title e come disabilitarli in un sito WordPress.

Crea siti Web professionali con i layout Divi

Prova i nostri layout per il tema Divi, usato da web agency e professionisti di WordPress!

Membership

Sepa

10,00 €  per sempre!

Con l’aggiunta di nuovi layout, il prezzo
può essere soggetto a modifiche.

R Più di 50 Layout Divi
R Download illimitati
R DOCUMENTAZIONE
R Assistenza PER email

10,00 €  per sempre!

Con l’aggiunta di nuovi layout, il prezzo
può essere soggetto a modifiche.