Vai al contenuto principale

Come creare un menu mobile su WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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 creato un sito web o un blog su WordPress, ti invitiamo a consultare Come installare un blog Wordpress passi 7 poi, 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 '.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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 '.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

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 altri plugin WordPress che ti permetteranno di gestire i menu, ecco alcuni plugin WordPress premium dedicati a questa attività. 

1. eroe Menu

Questo plugin ti consente di creare il tuo menu WordPress personalizzato in pochi semplici passaggi. Ti consente di creare in modo semplice e intuitivo un menu WordPress elegante e professionale. Dal mega menu più complesso e ricco di funzionalità, al menu più semplice con menu a discesa, il plugin WordPress 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

8Degree Fly Menu è un plugin WordPress premium che ti consente di aggiungere un menu canvas al tuo sito web, in modo da dargli un aspetto che evidenzi e facilmente le tue informazioni. 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.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

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.

...  

Questo articolo contiene i commenti 7

  1. 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!

      1. 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

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
5 azioni
quota2
Tweet
Enregistrer3