Suggerimenti per nascondere un menu mobile in WordPress

Nella maggior parte dei casi, i temi WordPress hanno già stili definiti che consentono loro di trasformare un normale menu di navigazione in un menu mobile. È conveniente se hai bisogno di una soluzione rapida pronta all'uso. Ad esempio, hai un layout tradizionale per computer desktop e un menu hamburger sui dispositivi mobili. Tuttavia, se desideri personalizzare ulteriormente o addirittura sostituire completamente il menu mobile esistente, è anche possibile. Esistono diversi modi per nascondere un menu mobile in WordPress, con plug-in o codice .

Come nascondere un menu mobile in WordPress

La personalizzazione completa del sito web richiede un po' di conoscenza ed esperienza. Se vuoi avere una personalizzazione sicura senza rischi, puoi utilizzare professionisti per personalizzare e mantenere il tuo sito web. Mentre ci sono alcune parti facili che puoi fare da solo, una personalizzazione più seria richiede un tocco professionale. Quando si tratta del menu mobile in WordPress, puoi utilizzare i plug-in per semplificare il processo . Oppure, se hai conoscenze di programmazione, puoi creare modifiche direttamente all'interno del codice.

Per aiutarti a cambiare il modo in cui il menu mobile appare sul tuo sito web, ecco i due modi più comuni per completarlo:

• Nascondi un menu mobile in WordPress con un plugin
• Nascondi menu mobile con codice CSS

Come nascondere un menu mobile in WordPress con un plugin

Probabilmente hai trovato un tema WordPress con un comportamento del menu mobile interessante e desideri replicarlo facilmente. Questo metodo non richiede conoscenze di codifica, quindi è più conveniente per questa attività. Dopo aver installato un plug-in, sarai in grado di rimuovere completamente il menu mobile sui dispositivi mobili . Inoltre, alcuni plugin ti permetteranno di personalizzarlo in profondità. Oltre a nascondere di base, puoi anche usarlo per rimuovere solo elementi specifici nel tuo menu.

Creazione di un nuovo menu mobile

Il primo passo è andare su Aspetto>Menu . Lì potrai creare un nuovo menu facendo clic sull'opzione "crea nuovo menu" in alto. Assegna un nome al tuo nuovo menu e confermalo con il pulsante "Crea menu" nell'angolo in basso a destra dello schermo.

Dopo questi passaggi, la selezione sul lato sinistro non sarà più deselezionabile e potrai aggiungere elementi per il tuo nuovo menu. Quando hai completato l'aggiunta di nuovi elementi, fai clic su "Salva menu" .

Trova e installa un plugin

Il prossimo passo è trovare e installare un plugin. Esistono numerosi plugin che possono aiutarti a manipolare e personalizzare i menu . Alcuni dei più popolari sono WP Mobile Menu, Max Mega Menu, Responsive Menu e così via. Per motivi di spiegazione, installiamo e attiviamo WP Mobile Menu.

Una volta terminato, vai su Opzioni del menu mobile nella barra laterale di WordPress a sinistra. All'interno delle opzioni del plug-in, ora puoi scegliere se visualizzare il tuo nuovo menu mobile a sinistra o a destra. Seleziona il menu creato in precedenza e quindi scorri verso il basso fino a "Nascondi menu tema originale" . Lì, puoi scegliere di rimuovere elementi specifici dal menu originale. Se fai clic sul campo "Trova elemento", otterrai un'anteprima dal vivo delle selezioni tra cui scegliere. Dopo aver completato il processo di selezione, salva le modifiche.

Sostituisci o nascondi menu

Dopo aver scelto cosa nascondere, torna su Aspetto>Menu . Seleziona da un menu a tendina il menu mobile creato in precedenza e impostane la "Posizione di visualizzazione" . Il tuo menu originale è ora nascosto e sostituito con il tuo menu personalizzato.

Ora puoi visitare il tuo sito web per vedere il tuo nuovo menu in azione. Il plug-in ora nasconderà il menu mobile del tuo tema e visualizzerà invece un menu personalizzato.

Come nascondere il menu con il codice CSS

Un altro metodo per nascondere il menu mobile richiede una certa conoscenza del codice CSS e delle pratiche . Le persone che creano spesso temi WordPress personalizzati sanno già quanto possono essere complesse alcune personalizzazioni. E, dati questi punti, non è esattamente un metodo consigliato per i principianti. Tuttavia…

Trova il nome del tuo menu

Il primo passo è trovare il menu che si desidera modificare. Probabilmente il modo più semplice è utilizzare gli strumenti di sviluppo del browser integrati . Vai al tuo sito web dove vuoi apportare modifiche e apri gli strumenti per sviluppatori. Se utilizzi Google Chrome, puoi farlo con la scorciatoia Ctrl+Maiusc+I . Nella parte superiore dello schermo, troverai l'opzione Attiva/disattiva barra degli strumenti del dispositivo che ti mostrerà l'aspetto del tuo sito Web sui dispositivi mobili. Puoi persino modificare diversi tipi e risoluzioni.

Ora che vedi come viene visualizzato sui dispositivi mobili, seleziona il pulsante a forma di freccia e fai clic sul menu per ispezionarlo. Ti condurrà immediatamente alla parte del codice in cui puoi vedere la classe CSS per un determinato menu. Cioè, vedrai quel nome di classe.

Nascondi il tuo menu con una nuova riga di codice

Dopo aver acquisito il nome proprio, vai semplicemente su Aspetto>Personalizza e seleziona "CSS aggiuntivo" . In generale, questo è solitamente nella parte inferiore della barra laterale sinistra. Fai clic e ti verrà visualizzata la schermata successiva. Lì, puoi fare clic sulla parte inferiore dello schermo per selezionare la visualizzazione mobile e, sopra, inserire il codice per nascondere il menu:

Codice: .menu-name {display: none;}

Infine, fai clic sul pulsante Pubblica e il gioco è fatto. Se hai un po' più di familiarità con il codice CSS, molte di queste modifiche possono essere completate all'interno del file CSS. Tuttavia, dovrai prestare attenzione alle richieste dei media. Ti consentiranno di creare regole diverse per dispositivi diversi, in modo da poter avere un maggiore controllo sui tuoi siti Web e sul comportamento dei menu.

Se sei un principiante nella modifica del layout, l'opzione del plug-in è probabilmente il modo migliore per iniziare. Se inizi a modificare il codice senza sapere esattamente cosa stai facendo, puoi facilmente interrompere l'aspetto del tuo sito web. Ci sono numerose regole e proprietà nei CSS che si sovrascrivono a vicenda. Quindi, se vuoi nascondere il tuo menu mobile in WordPress senza rischi, usa i plugin per completare il lavoro per te .