Come nascondere un menu mobile in WordPress (passo dopo passo)

In WordPress, se stai cercando di nascondere i menu dei dispositivi mobili, continua a leggere questo blog

Scoprirai che la maggior parte dei temi di WordPress sono dotati di stili integrati, questo ti aiuterà a convertire automaticamente il menu di navigazione in un menu mobile.

Sul tuo telefono cellulare, potresti non voler utilizzare un menu simile perché potresti occuparti di alcuni stili di menu diversi da visualizzare sui tuoi telefoni cellulari.

Di seguito troverai due diversi metodi per nascondere un menu mobile in WordPress:

Metodo 1: nascondi i menu mobili con il plugin di WordPress

Per i principianti si consiglia il metodo 1 in quanto non hanno bisogno di pasticciare con la codifica, devono solo utilizzare i plug-in per nascondere il menu mobile che è fornito per impostazione predefinita dal tema WordPress.

Dopo averlo nascosto, possono utilizzare vari menu o scegliere di non visualizzare alcun menu sui dispositivi mobili.

Per utilizzare il plug-in di WordPress, il principiante deve prima accedere alla dashboard di WordPress, quindi fare clic su aspetto e quindi sulla pagina del menu. Qui possono creare un nuovo menu di navigazione per mostrarlo sui dispositivi palmari.

Ora troverai un'altra schermata in cui hai un nuovo nome di menu in modo da poterlo riconoscere quando necessario. Considera di aver aggiunto il nome come "menu del telefono". Ora puoi scegliere l'articolo.

Dopo aver aggiunto le voci al menu, ora è il momento di fare clic sul pulsante Salva menu.

Ora dal repository dei plugin di WordPress puoi scegliere un menu WP Mobile e scaricarlo. Oppure puoi installare questo plugin direttamente dalla dashboard di WordPress.

Sarà necessario accedere alla pagina del menu mobile al momento dell'attivazione per configurare le impostazioni del plug-in.
Ora qui troverai un'opzione per rendere il menu del tuo telefono a sinistra o a destra. È possibile attivare o disattivare l'opzione b.

Ora seleziona il menu del telefono che abbiamo creato in precedenza dal menu a discesa.

Ora, scorri la pagina verso il basso fino a quando non ottieni un'opzione per "nascondi il menu del tema originale". Ora questa opzione ti aiuterà a dire al plug-in che il menu mobile del tema WordPress deve essere nascosto.

Per impostazione predefinita, gli elementi identificativi più utilizzati utilizzati dai temi WordPress ottimizzati per dispositivi mobili verranno utilizzati dai plug-in. La maggior parte degli utenti del sito Web non dovrà fare nulla qui.

Supponiamo che il plug-in che stai utilizzando non sia in grado di nascondere un menu mobile dei tuoi temi, quindi puoi visitare di nuovo la stessa pagina e fare clic con il mouse su "trova elemento" per puntare al menu di navigazione del tuo tema.

Per memorizzare tutte le tue impostazioni non dimenticare di salvare le modifiche.

Ora, poiché abbiamo configurato l'utilizzo del plug-in, ora è necessario comunicare al tuo sito Web che deve mostrare il menu del telefono che viene aggiunto dal plug-in in una nuova posizione del menu.

Per farlo:

Vai all'aspetto e fai clic sulla pagina del menu.

Assicurati che nel menu a discesa, il menu del telefono che hai creato sia selezionato correttamente. Ora seleziona la posizione sotto la voce di menu, ad esempio menu mobile destro o menu mobile sinistro.

Ora controlla se il nuovo menu è visibile sul tuo sito web o meno. Tuttavia, il plug-in che stavamo utilizzando non mostrerà il menu mobile del tuo tema ma mostrerà quello che abbiamo creato, ovvero il menu del telefono.

Il plug-in che abbiamo suggerito, ad esempio il plug-in del menu mobile WP, ti aiuterà a cambiare il colore della barra dei menu, aggiungere più icone, cambiare l'opacità e molto altro nell'impostazione. È possibile utilizzare facilmente e liberamente tali opzioni di impostazione.

Metodo 2: con l'aiuto del codice, nascondi il menu mobile

Mentre scegli questo metodo per nascondere un menu mobile assicurati di avere esperienza nella codifica o almeno di conoscere alcuni CSS personalizzati.

Per questo metodo, avrai due diversi approcci. O puoi rendere invisibile l'intero menu mobile con l'aiuto dei CSS, oppure puoi rendere invisibili i singoli elementi sui dispositivi mobili.

Rendi invisibile il tuo menu completo su piccoli dispositivi con CSS

Gli elementi che stai cercando di modificare con l'aiuto del codice CSS personalizzato devono essere individuati. Per fare ciò dovrai prima visitare il tuo sito web e poi cliccare sul menu di navigazione. Ora fai clic destro su di esso e scegli uno strumento di ispezione.

Ora troverai le due diverse schermate. Una schermata mostrerà il tuo sito Web mentre un'altra schermata mostrerà il codice sorgente. Tuttavia, è necessario ridurre lo schermo del browser a meno che il menu di navigazione del desktop non venga sostituito con il menu mobile.

Ora è necessario capire i CSS e gli identificatori utilizzati dal menu di navigazione del tuo sito Web WordPress. Spostando il mouse sul codice sorgente del tuo sito web puoi evidenziare l'area del menu.

• Ora vai alla dashboard di WordPress.
• Fare clic su aspetto
• Vai all'opzione della pagina di personalizzazione per avviare la personalizzazione del tema.
• Ora puoi tornare alla scheda "CSS aggiuntivo" e nell'angolo destro del pannello di amministrazione fai clic sull'icona del cellulare.

Un addetto alla personalizzazione ti mostrerà un'anteprima sull'aspetto del tuo sito Web sui telefoni. È necessario aggiungere il codice CSS menzionato di seguito e nel pannello di anteprima il menu mobile scomparirà.

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

Assicurati di aver sostituito .nav-toggle-wrapper con l'identificatore utilizzato dal tuo tema WordPress.
In alto clicca sul 'pulsante di pubblicazione' per salvare tutte le modifiche.

Rendi invisibile un menu specifico sul tuo telefonino utilizzando i CSS

Questo è il secondo approccio per nascondere un menu mobile. In questo approccio, ti verrà chiesto di creare un menu di navigazione e quindi di rendere visibile o invisibile il menu mobile sul desktop o sui dispositivi mobili.

Il vantaggio dell'utilizzo di tale metodo è che puoi utilizzare un menu di navigazione simile per nascondere i menu sul desktop o sui telefoni cellulari.

• Nella dashboard di WordPress
• Vai all'apparenza
• Fare clic sulla pagina del menu
• Premi il pulsante di opzione dello schermo
• Proprio accanto alle opzioni "Classi CSS" seleziona la casella.

Finché non trovi la voce di menu che desideri nascondere, scorri la pagina verso il basso. Troverai un'opzione per aggiungere una classe CSS nelle impostazioni delle voci di menu. Fare clic su di esso e aggiungere la classe CSS .hide-mobile.

Per nascondere un menu mobile, ripetere questo processo.

Tuttavia, puoi anche fare clic con il mouse sulle voci di menu che desideri rendere invisibili sui computer desktop. Qui dovrai aggiungere classi CSS .hide-desktop.

Ora salva le modifiche facendo clic sul "pulsante salva menu".

Per nascondere il menu mobile è necessario aggiungere il codice CSS personalizzato. Per questo

• Vai all'apparenza
• Fare clic sulla pagina di personalizzazione
• Verrà lanciato il personalizzatore del tema
• Ora fai clic sulla scheda CSS aggiuntiva
• E aggiungi il codice indicato di seguito nella casella CSS

@media (larghezza minima: 980px){
    .hide-desktop{
    display: nessuno !importante;
    }
}
    @media (larghezza massima: 980px){
    .nascondi-cellulare{
    display: nessuno !importante;
    }
}

Ora puoi controllare sul tuo sito web se il menu mobile che stavi nascondendo è visibile o meno. Probabilmente i menu mobili saranno invisibili perché stiamo seguendo i passaggi per nascondere un menu mobile.

Conclusione:
Ci auguriamo che i due diversi metodi menzionati in questo blog ti aiutino a nascondere un menu mobile in modo semplice ed efficiente.