Hai mai sfogliato un sito web e hai scoperto che un menu di navigazione è sempre visibile in alto?

In linea di principio, i menu di navigazione sono visualizzati in modo tale da scomparire durante lo scorrimento della pagina. I menu di navigazione sempre visibili fluttuano e lo sono indipendentemente da come l'utente scorre verso il basso.Come creare un menu mobile wordpress 1

In questo tutorial, ti mostreremo come creare facilmente un menu mobile sul tuo blog WordPress.

Se non hai ancora creato un sito web o un blog su WordPress, ti invitiamo a consultare Come installare un blog WordPress in 7 passaggi quindi, Come trovare, installare e attivare un tema WordPress sul tuo blog

Se è fatto, entriamo in ciò che ci riguarda oggi.

Metodo 1: come aggiungere un menu mobile su WordPress usando un plugin

Questo metodo è più semplice ed è veloce. Se non hai ancora impostato i menu di navigazione, puoi farlo imparare a farlo.

Plugin per wordpress menu appiccicoso

La prima cosa che devi fare è installare e attivare il plugin " Sticky Menu (o niente!) Noi Scroll ". Se non sai come installare un plugin, tu puoi leggere il nostro tutorial.

Dopo l'attivazione, è necessario visitare " Impostazioni »Menu appiccicoso Per configurare le impostazioni di questo plugin.

Plugin per wordpress menu appiccicoso

Innanzitutto, devi inserire gli ID CSS del menu di navigazione che vuoi rendere mobile.

Dovrai utilizzare lo strumento "ispeziona" del tuo browser per trovare il CSS utilizzato.

Vai al tuo sito Web e sposta il mouse sul menu di navigazione. Dopodiché devi fare clic con il tasto destro e selezionare "Ispeziona".

Vai oltre scoprendo Come personalizzare un tema WordPress con la matita gialla

Ispeziona un codice wordpress del tutorial

Ciò dividerà (per impostazione predefinita) la schermata del browser e sarai in grado di vedere il codice sorgente del menu di navigazione. Devi trovare una linea simile a questa:

In questo esempio, l'ID CSS del nostro menu di navigazione è " site Navigation '.

Vai avanti e inserisci l'ID CSS del menu nelle impostazioni del plug-in come segue "# site-navigation".

L'opzione successiva nelle impostazioni del plug-in è impostare lo spazio tra la parte superiore dello schermo e il menu di navigazione mobile. È possibile utilizzare questa impostazione se il menu si sovrappone a un elemento che non si desidera nascondere. Altrimenti, ignora questa impostazione.

Dopodiché è necessario fare clic sulla casella accanto all'opzione: "Check Bar Admin". Ciò consente al plugin di aggiungere un po 'di spazio per la barra degli strumenti di WordPress che viene aggiunta per gli utenti che hanno effettuato l'accesso.

L'opzione successiva nella pagina delle impostazioni ti consente di nascondere il menu di navigazione se un utente sta visitando il tuo sito web utilizzando uno schermo più piccolo, come un dispositivo mobile.

È possibile verificare come viene visualizzato questo menu su dispositivi mobili e tablet. Se non ti piace, puoi aggiungere 780px a questa opzione.

Scopri anche Come creare un menu reattivo per WordPress cellulare

Non dimenticare di fare clic sul pulsante " Salva le impostazioni Per salvare le modifiche.

Ora puoi visitare il tuo sito Web per vedere il tuo menu di navigazione mobile in azione.

Menu mobile di Wordpress

Metodo 2: come aggiungere manualmente un menu di navigazione

Questo metodo richiede l'aggiunta di codice CSS personalizzato al tuo tema WordPress.

Prima di tutto devi visitare " Aspetto> Personalizza Per avviare il personalizzatore di WordPress.

Customizer aggiuntivo css wordpress

Fare clic su ' CSS aggiuntivo Nel riquadro sinistro, quindi aggiungere questo codice CSS.

# Navigazione del sito {background: #fff; altezza: 60px; z-index: 170; margin: 0 auto; border-bottom: 1px #dadada solido; larghezza: 100%; position: fixed; top: 0; a sinistra: 0; destra: 0; text-align: center; }

Sostituisci " # Site Navigation Dall'identificatore del menu di navigazione e fare clic sul pulsante « Enregistrer '.

Ora puoi visitare il tuo sito Web per vedere il tuo menu di navigazione mobile in azione.

Se il menu di navigazione viene visualizzato normalmente dopo l'intestazione del sito Web, questo codice CSS potrebbe sovrapporsi al titolo e all'intestazione del sito Web.

Questo può essere facilmente regolato aggiungendo un margine nell'area dell'intestazione utilizzando il codice seguente:

.site-branding {margin-top: 60px; }

Qui finisce il nostro tutorial, ora potrai creare o aggiungere un menu mobile sul tuo sito web.

Se stai cercando altro plugin di WordPress che ti permetteranno di gestire i menù, eccone alcuni plugin di WordPress premio dedicato a questo compito. 

1. eroe Menu

Questo plugin ti consente di creare il tuo menu WordPress personalizzato in pochi semplici passaggi. In particolare permette di creare in modo semplice ed intuitivo un menu WordPress elegante e professionale. Dal più complesso mega menu ricco di funzionalità, al più semplice menu a discesa, il WordPress Plugin HeroMenu imposta qualsiasi tipo di menu e lo rende attivo e funzionante in pochi minuti.

Mega menu plug-in per wordpress reattivo del menu Hero

In termini di funzionalità che offre tra l'altro: perfettamente funzionante su PC, tablet e smartphone, facile da usare, contenuto personalizzabile, CSS personalizzato per aggiungere i tuoi stili di menu, mega menu designer, browser supportati: Chrome, Firefox, Safari , Opera, IE9 e altro ancora.

Download | Demo | Web hosting

2. Menu scorrevole

Menu scorrevole non è solo un plugin di menu per WordPress. Può essere utilizzato per creare più livelli di menu in modo illimitato, così come barre laterali con contenuti ricchi, più opzioni di stile ed effetti animati.

Menu verticale reattivo per wordpress

Ogni livello di menu è personalizzabile con colori di sfondo, immagini, video, caratteri personalizzati e altro ancora. Questo plugin è completamente reattivo e ha oltre 45 animazioni per le voci di menu.

Download | Demo | Web hosting

3. Menu Fly 8Degree

Il menu di volo a 8 gradi è a WordPress Plugin premium che ti consente di aggiungere un menu canvas al tuo sito Web, in modo da dargli un aspetto che evidenzi le tue informazioni in modo semplice. Utilizza la funzione di menu predefinita di WordPress per creare i suoi menu.

8degree fly menu reattivo off plug-in menu per wordpress

Sarai in grado di aggiungere ulteriori elementi alle voci di menu predefinite, come icone, slogan di menu, un'intestazione pseudo-raggruppante e una descrizione lunga. Inoltre viene fornito con un editor WYSIWYG per aiutarti a cogliere la tua lunga descrizione in modo intuitivo e con questo editor puoi anche usare gli shortcode.

Download | Demo | Web hosting

Altre risorse consigliate

Se vuoi andare oltre nella creazione o nella personalizzazione dei menu del tuo blog o del tuo sito web, ti consigliamo anche di consultare i link qui sotto.

Conclusione

Ecco ! Questo è tutto per questo tutorial, spero che ti permetta di aggiungere un menu mobile al tuo blog WordPress. Ti invitiamo a condividi questo articolo con i tuoi amici sui tuoi social network.

Se avete suggerimenti o osservazioni, saranno i benvenuti. E se non conosci WordPress, consultare questo risorsa.

...