Come nascondere un menu mobile in WordPress (Guida per principianti)

La navigazione mobile può fare o distruggere l'esperienza utente del tuo sito WordPress. E su WPBeginner, abbiamo scoperto che le impostazioni predefinite del menu mobile non sempre si allineano con ciò che i nostri utenti desiderano ottenere sui loro siti web.

Sebbene i temi WordPress facciano un buon lavoro nel convertire i menu desktop in versioni adatte ai dispositivi mobili, questa conversione automatica non è sempre la soluzione migliore.

I nostri utenti hanno spesso bisogno di visualizzare opzioni di navigazione diverse per i loro visitatori mobili, sia per semplicità, promozioni speciali o migliori tassi di conversione.

In questo articolo, ti mostreremo come nascondere facilmente il menu mobile predefinito in WordPress in modo da poter mostrare un menu personalizzato.

Tratteremo due metodi diversi in questo tutorial e puoi utilizzare i collegamenti rapidi qui sotto per passare al metodo che desideri utilizzare:

• Metodo 1: Nascondere un menu mobile in WordPress utilizzando un plugin
• Metodo 2: Nascondere il menu mobile utilizzando il codice CSS

Metodo 1: Nascondere un menu mobile in WordPress utilizzando un plugin

Il modo più semplice per nascondere il menu mobile fornito dal tuo tema WordPress è utilizzare il plugin WP Mobile Menu.

Questo plugin ti consente di creare un menu unico e quindi mostrarlo agli utenti mobili. Puoi anche nascondere il menu mobile che molti temi forniscono per impostazione predefinita.

Crea il tuo menu mobile

Innanzitutto, devi creare il menu di navigazione che desideri visualizzare sui dispositivi mobili. Per iniziare, vai alla pagina Aspetto » Menu nella tua dashboard di WordPress.

Nella schermata successiva, devi inserire un nome per il menu. È una buona idea usare qualcosa che ti aiuti a identificare il menu in seguito, come 'Menu Mobile'.

Dopodiché, puoi selezionare tutti i post e le pagine che desideri aggiungere al menu mobile.

Per istruzioni più dettagliate, consulta la nostra guida su come creare un menu di navigazione in WordPress.

Quando sei soddisfatto del layout del menu, ricorda di fare clic sul pulsante 'Salva menu' per salvare le modifiche.

Configura le impostazioni del plugin

Fatto ciò, è ora di installare e attivare il plugin WP Mobile Menu. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, vai su Opzioni Menu Mobile per configurare le impostazioni del plugin.

Qui, devi scorrere fino in fondo alla pagina e scegliere se mostrare il menu mobile sul lato sinistro o destro dello schermo utilizzando i toggle 'Abilita menu sinistro/destro'.

Successivamente, apri il menu a discesa 'Scegli un menu' e seleziona il menu mobile che hai creato in precedenza.

Dopodiché, fai semplicemente clic su 'Salva modifiche'.

Ci sono molti modi per stilizzare il tuo menu di navigazione WordPress. Ad esempio, puoi selezionare 'Opzioni font' e quindi modificare la dimensione del carattere, il peso, la spaziatura e altro ancora.

Puoi anche selezionare 'Stile intestazione' e modificare l'aspetto e il comportamento dell'intestazione mobile.

Ad esempio, puoi aggiungere un'ombra, modificare l'altezza dell'intestazione, creare un menu di navigazione fisso e altro ancora.

La maggior parte di queste impostazioni sono semplici, quindi puoi esaminarle e vedere che tipi di effetti puoi creare. Ad esempio, puoi aggiungere un'icona immagine o aggiungere CSS ai tuoi menu di WordPress.

Quando sei soddisfatto di come è impostato il menu mobile, fai clic su 'Salva modifiche'.

Aggiungi il tuo menu mobile a WordPress

Ora che hai configurato il plugin, il passo successivo è dire a WordPress dove mostrare il menu mobile andando su Aspetto » Menu.

Se non è già selezionato, apri il menu a discesa ‘Seleziona un menu da modificare’ e scegli il menu mobile che hai creato in precedenza.

Quindi, sotto ‘Impostazioni menu’, devi selezionare ‘Menu mobile sinistro’ o ‘Menu mobile destro’, a seconda di dove vuoi mostrare il menu.

Dopo di che, fai semplicemente clic su ‘Salva menu.’

Ora, visita il tuo sito web su un dispositivo mobile o visualizza la versione mobile del tuo sito WordPress dal desktop. Dovresti vedere il menu mobile personalizzato.

Risoluzione dei problemi: Come nascondere il menu mobile predefinito

Per impostazione predefinita, il plugin nasconde automaticamente gli elementi del menu utilizzati da la maggior parte dei temi WordPress più diffusi. Ciò significa che il menu mobile predefinito del tuo tema dovrebbe essere nascosto senza che tu debba fare nulla.

Tuttavia, se il menu mobile predefinito appare ancora, dovrai andare su Opzioni menu mobile » Opzioni generali » Opzioni di visibilità nella dashboard di WordPress.

Qui, fai clic sul pulsante ‘Trova elemento’.

Questo apre una versione mobile del tuo sito web.

In questo popup, fai clic per selezionare il contenuto che desideri nascondere sui dispositivi mobili, come il menu fornito dal tuo tema WordPress.

Questo aggiunge la classe CSS del contenuto al campo ‘Nascondi elementi’.

Fatto ciò, fai clic su ‘Salva modifiche’. Ora, il menu del tema non dovrebbe più apparire sui dispositivi mobili.

Metodo 2: Nascondere il menu mobile utilizzando il codice CSS

Questo metodo è un po' avanzato e richiede di aggiungere codice personalizzato al tuo sito web.

Per questo metodo, puoi scegliere tra due approcci diversi. Puoi nascondere l'intero menu mobile predefinito utilizzando il CSS, oppure puoi nascondere singoli elementi del menu sui dispositivi mobili.

1. Nascondere un menu completo sui dispositivi mobili utilizzando il CSS

Un'opzione è rimuovere completamente il menu mobile predefinito dal tuo tema WordPress. Questa è una buona scelta se desideri utilizzare un metodo di navigazione diverso sui dispositivi mobili, come link di navigazione breadcrumb o immagini interattive.

Innanzitutto, devi trovare l'elemento che devi modificare. Per farlo, vai semplicemente sul tuo sito WordPress e passa il mouse sopra il menu di navigazione.

Dopodiché, fai clic con il pulsante destro del mouse e seleziona lo strumento Ispeziona del tuo browser.

Lo schermo del tuo browser si dividerà ora in due e vedrai il codice della pagina, incluso il codice per il menu di navigazione.

Tuttavia, non vogliamo modificare questo menu di navigazione poiché lo vediamo sullo schermo del desktop.

Fortunatamente, c'è un modo semplice per accedere invece al menu mobile.

Semplicemente, trascina l'angolo del browser per rimpicciolirlo finché WordPress non sostituirà il menu di navigazione desktop con il menu mobile.

Ora, devi scoprire l'identificatore e la classe CSS utilizzati dal menu di navigazione mobile. Sposta semplicemente il mouse sul codice sorgente finché il tuo browser non evidenzia l'area del menu. Questa sezione contiene la classe e l'identificatore che devi utilizzare.

Una volta ottenute queste informazioni, puoi nascondere il menu sui dispositivi mobili utilizzando il codice.

Spesso, le guide di WordPress ti chiederanno di aggiungere codice personalizzato al tuo file functions.php. Tuttavia, questo non è molto intuitivo e anche un piccolo errore nel codice può causare tutti i tipi di errori comuni di WordPress. Il codice personalizzato potrebbe persino bloccare completamente il tuo sito web.

Invece, è più sicuro aggiungere codice personalizzato utilizzando WPCode.

Questo plugin gratuito rende facile aggiungere CSS personalizzato, PHP, HTML e altro a WordPress senza mettere a rischio il tuo sito. Puoi semplicemente incollare il codice del plugin nell'editor di WPCode, quindi attivare e disattivare il codice con un clic.

Per iniziare, dovrai installare e attivare WPCode. Per maggiori informazioni, consulta la nostra guida passo passo su come installare un plugin di WordPress.

Dopo di che, vai su Frammenti di codice » Aggiungi frammento nella bacheca di WordPress.

Qui vedrai tutti gli snippet predefiniti che puoi aggiungere al tuo sito. Questo include uno snippet che ti permette di disabilitare completamente i commenti, caricare tipi di file che WordPress normalmente non supporta, disabilitare le pagine di allegato, e molto altro.

Per aggiungere CSS personalizzato al tuo sito, passa il mouse su ‘Aggiungi il tuo codice personalizzato’ e poi fai clic sul pulsante ‘+ Aggiungi snippet personalizzato’.

Quindi, seleziona ‘Snippet CSS’ come tipo di codice dall'elenco di opzioni che appaiono sullo schermo.

Questo ti porterà alla pagina Crea snippet personalizzato.

Per iniziare, digita un titolo per lo snippet di codice. Può essere qualsiasi cosa che ti aiuti a identificare lo snippet nella tua bacheca di WordPress.

Dopo di che, puoi incollare o digitare il seguente codice nell'editor di codice:

.navbar-toggle-wrapper {
display:none;
}

Non dimenticare di sostituire .navbar-toggle-wrapper con l'identificatore che hai trovato usando lo strumento Ispeziona del tuo browser.

Quando sei pronto per pubblicare lo snippet di codice, scorri fino in cima allo schermo e fai clic sull'interruttore ‘Inattivo’ in modo che cambi in ‘Attivo’.

Infine, fai clic su 'Salva Snippet' per rendere lo snippet attivo.

Ora, il menu mobile del tuo tema sarà nascosto su smartphone e tablet.

2. Nascondere elementi specifici del menu nel menu mobile usando CSS

Questo metodo ti consente di creare un menu di navigazione e quindi mostrare o nascondere selettivamente gli elementi che non desideri appaiano sui dispositivi mobili o desktop.

In questo modo, puoi usare lo stesso menu di navigazione per visitatori da mobile e desktop. Per prima cosa, vai su Aspetto » Menu.

Fatto ciò, fai clic sul pulsante ‘Opzioni Schermo’ nell’angolo in alto a destra dello schermo.

Da qui, devi selezionare la casella accanto all’opzione ‘Classi CSS’.

Dopodiché, scorri fino a una voce di menu che desideri nascondere su mobile e fai clic per espanderla.

Nelle impostazioni della voce di menu, vedrai l’opzione per aggiungere una classe CSS. Qui, vai avanti e aggiungi una classe CSS .hide-mobile.

Ripeti il processo per tutte le voci di menu che desideri nascondere su mobile.

Allo stesso modo, puoi fare clic su qualsiasi voce di menu che desideri nascondere sui computer desktop. Tuttavia, questa volta, aggiungi invece la classe CSS .hide-desktop.

Una volta terminato, non dimenticare di fare clic sul pulsante ‘Salva Menu’ per memorizzare le modifiche.

Fatto ciò, sei pronto per nascondere queste voci di menu utilizzando CSS personalizzato. Crea semplicemente un nuovo frammento di codice personalizzato seguendo lo stesso processo descritto sopra.

Ora, puoi aggiungere il seguente CSS all’editor di codice WPCode:

@media (min-width: 980px){

    .hide-desktop{
    display: none !important;
    }

}

    @media (max-width: 980px){
    .hide-mobile{
    display: none !important;
    }

}

Dopodiché, pubblica semplicemente il frammento di codice.

Ora, se visiti il tuo blog WordPress, vedrai che le voci di menu che volevi nascondere su desktop non sono più visibili. Per testare come appare il menu su mobile, riduci semplicemente la dimensione della finestra del browser finché WordPress non passa al menu mobile.

Speriamo che questo articolo ti abbia aiutato a imparare come nascondere facilmente un menu mobile in WordPress. Potresti anche voler vedere le nostre scelte esperte per i migliori page builder drag and drop per WordPress e la nostra guida su come aggiungere logica condizionale ai menu.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.