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.
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.
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.
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
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.
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.
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.
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.
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.
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.
- Come aggiungere stile al vostro menu di navigazione
- Come aggiungere un attributo title nei menu WordPress
- Plugin 8 WordPress per creare un megamenu sul tuo blog
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.
...
Buongiorno,
Prima di tutto, grazie per questo tutorial che fa perfettamente il lavoro!
Ma non importa quanto duramente ho cercato in rete, non sono riuscito a trovare la risposta alla mia domanda:
Come fare, una volta creato il menu fluttuante (in CSS o con estensione qualunque), in modo che le mie sezioni appaiano dopo il menu e non dietro il menu?
È particolarmente fastidioso nel mio caso perché è una pagina e le voci del mio menu si riferiscono quindi a sezioni delle pagine, che ogni volta risalgono dietro il mio menu ...
ti parla?
Grazie in anticipo!
Mi chiedevo se fosse possibile rendere "appiccicoso" il sommario di una pagina ...
Buongiorno,
Mai testato ancora Non posso risponderti.
Buongiorno; Ciao
Ho provato con un tema scaricato (wallstreet) ma, seguendo le tue istruzioni, non cambia nulla ... non so cosa manca ...
Mi piace e vorrei poterlo usare ...
grazie
Raul
hi,
Prova a disabilitare tutti gli altri plugin di WordPress e guarda il display successivo.
Grazie per il tuo tutorial, semplice come dire tutto!
Buongiorno,
Sono contento di essere stato utile.