Il menu di navigazione principale di un sito web contiene solitamente collegamenti a tutte le pagine più importanti. Quando rendi questo menu fisso, puoi mantenerlo sullo schermo mentre l'utente scorre la pagina verso il basso. In questo modo, è sempre a portata di mano.
Ciò rende la navigazione più accessibile, consentendo agli utenti di passare rapidamente a diverse sezioni del tuo sito senza dover scorrere fino in cima. Secondo noi, l'utilizzo di un menu fisso può contribuire ad aumentare l'engagement e migliorare l'usabilità generale del sito web.
In questo articolo, ti mostreremo come aggiungere facilmente un menu di navigazione fisso e fluttuante al tuo sito web WordPress.
Cos'è un menu di navigazione fisso e fluttuante?
Un menu di navigazione fisso o fluttuante si 'fissa' nella parte superiore dello schermo mentre l'utente scorre verso il basso, rimanendo quindi sempre visibile.
Di solito, il menu di navigazione principale in WordPress contiene collegamenti ai contenuti più importanti del tuo sito web. Rendendo fisso questo menu, i visitatori possono fare clic su quei collegamenti in qualsiasi momento senza dover scorrere.
Se gestisci un negozio online, il menu di navigazione principale contiene solitamente collegamenti a pagine progettate per convertire, come la pagina di checkout e il carrello del cliente. Rendendo fisso il menu principale, puoi spesso ridurre i tassi di abbandono del carrello e ottenere più vendite.
Detto questo, vediamo come puoi creare facilmente un menu di navigazione fisso e fluttuante in qualsiasi tema WordPress o negozio WooCommerce. Utilizza semplicemente i collegamenti rapidi qui sotto per passare al metodo che desideri utilizzare:
- Metodo 1: Aggiungere un menu fisso tramite le impostazioni del tema (Facile)
- Metodo 2: Aggiungere il menu di navigazione fisso tramite un plugin (Consigliato)
- Metodo 3: Aggiungere un menu di navigazione flottante fisso tramite codice
- Bonus: Rendere i tuoi post di WordPress fissi
Metodo 1: Aggiungere un menu fisso tramite le impostazioni del tema (Facile)
Alcuni dei migliori temi WordPress hanno il supporto integrato per i menu di navigazione fissi. Detto questo, vale la pena controllare le impostazioni del tuo tema andando su Temi » Personalizza nella dashboard di WordPress e cercando eventuali impostazioni etichettate come 'Menu'.
Se non sei sicuro che il tuo tema supporti i menu fissi, puoi controllare la documentazione del tema o persino contattare lo sviluppatore per assistenza. Per maggiori informazioni, consulta la nostra guida su come chiedere correttamente supporto per WordPress e ottenerlo.
Se il tuo tema non ha il supporto integrato per i menu fissi, dovrai utilizzare uno degli altri metodi di seguito.
Metodo 2: Aggiungere il menu di navigazione fisso tramite un plugin (Consigliato)
Il modo più semplice per aggiungere un menu di navigazione fisso in WordPress è utilizzare il plugin Sticky Menu & Sticky Header. Ti permette di rendere fisso qualsiasi elemento, inclusi i menu.
Innanzitutto, dovrai installare e attivare il plugin. Se hai bisogno di aiuto, consulta la nostra guida per principianti su come installare un plugin WordPress.
Dopo l'attivazione, vai su Impostazioni » Menu Fisso (o Qualsiasi Cosa!).
Per iniziare, dovrai ottenere l'ID CSS del menu di navigazione che desideri rendere fisso utilizzando lo strumento di ispezione del tuo browser.
Visita semplicemente il tuo sito web e passa il mouse sopra il menu di navigazione. Quindi, fai clic destro e seleziona 'Ispeziona' dal menu del browser.
Questo aprirà un nuovo pannello all'interno del browser, dove potrai vedere il codice sorgente del menu di navigazione.
Devi trovare la riga di codice che si riferisce al menu o all'intestazione del tuo sito. Sarà simile a questa:
<nav id="site-navigation" class="main-navigation" role="navigation">
Se hai difficoltà a trovare il codice, passa il mouse sopra le diverse righe di codice nel pannello 'Ispeziona'. Quando trovi il codice giusto, il browser evidenzierà il menu di navigazione, come puoi vedere nell'immagine seguente.
In questo caso, l'ID CSS del menu di navigazione è site-navigation.
Una volta che hai queste informazioni, torna alla tua bacheca di WordPress e aggiungile al campo 'Elemento fisso (richiesto)'.
Dovrai anche aggiungere un carattere cancelletto (#) all'inizio, quindi site-navigation diventa #site-navigation.
Dopodiché, fai clic sul pulsante 'Salva modifiche' in fondo alla pagina per memorizzare le tue modifiche.
Ora, se visiti il tuo sito web WordPress e scorri, il menu dovrebbe rimanere in alto.
A volte, il menu fisso potrebbe sovrapporsi ad alcuni contenuti che non vuoi nascondere.
Se ciò accade, dovrai definire uno spazio tra la parte superiore dello schermo e il menu di navigazione fisso digitando un numero nel campo 'Spazio tra la parte superiore della pagina e l'elemento fisso'.
I menu fissi possono causare problemi ai dispositivi con schermi più piccoli, come i dispositivi mobili. Tenendo presente ciò, è una buona idea controllare la versione mobile del tuo sito web WordPress dal tuo desktop.
Se non sei soddisfatto di come appare il menu, puoi 'rimuoverlo' per gli utenti mobili trovando il seguente campo: 'Non fissare l'elemento quando lo schermo è più piccolo di'.
Qui, digita '780px'.
Ci sono altre impostazioni da esplorare, ma questo è tutto ciò che ti serve per creare un menu di navigazione fisso funzionante.
Quando sei soddisfatto di come è configurato il menu di navigazione, fai clic su 'Salva modifiche' per memorizzare le tue impostazioni.
Metodo 3: Aggiungere un menu di navigazione flottante fisso tramite codice
Puoi anche creare un menu di navigazione fisso utilizzando CSS.
Il modo migliore per aggiungere codice personalizzato a WordPress è utilizzare WPCode. è il miglior plugin per snippet di codice che ti consente di aggiungere CSS personalizzato, PHP, HTML e altro.
Dato che non stai modificando direttamente i file del tema, puoi evitare molti errori comuni di WordPress. Puoi anche aggiornare il tuo tema o passare a un tema completamente diverso senza perdere il tuo codice personalizzato.
Puoi anche attivare e disattivare il menu sticky con un singolo clic.
Innanzitutto, dovrai installare e attivare il plugin gratuito WPCode. Per maggiori informazioni, consulta la nostra guida passo passo su come installare un plugin di WordPress.
Una volta attivato il plugin, vai alla pagina WPCode » + Aggiungi Snippet, dove vedrai tutti gli snippet WPCode pronti all'uso che puoi aggiungere al tuo sito.
Questi includono uno snippet che ti permette di disabilitare completamente i commenti, caricare tipi di file che WordPress normalmente non supporta, disabilitare le pagine di allegato, e molto altro.
Qui, passa semplicemente il mouse su ‘Aggiungi il tuo codice personalizzato (Nuovo Snippet)’ e fai clic sul pulsante ‘Usa snippet’ quando appare.
Nella schermata successiva, devi digitare un titolo per lo snippet di codice. Questo è solo per riferimento, quindi puoi usare quello che vuoi.
Quindi, apri il menu a discesa ‘Tipo di codice’ e scegli ‘Snippet CSS’.
Fatto ciò, aggiungi il seguente snippet all'editor di codice WPCode:
#site-navigation {
background:#00000;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
Questo creerà un menu di navigazione con uno sfondo nero. Puoi usare qualsiasi colore desideri cambiando il codice esadecimale accanto a background.
Ad esempio, usare background: #ffffff ti darà uno sfondo bianco per il menu. Se non sei sicuro di quale codice esadecimale usare, puoi consultare una risorsa come codice colore HTML.
Dovrai anche sostituire #site-navigation con l'ID CSS del tuo menu di navigazione. Per trovare questo codice, segui semplicemente lo stesso processo descritto sopra.
Quando sei soddisfatto del codice, fai clic sull'interruttore 'Inactive' in modo che cambi in 'Active', quindi fai clic sul pulsante 'Save Snippet'.
Ora, se visiti il tuo blog o sito web WordPress, vedrai il menu di navigazione fisso e fluttuante in azione.
A seconda del tuo tema, a volte il menu di navigazione potrebbe apparire sotto l'intestazione del sito invece che sopra. In questo caso, il menu di navigazione fisso potrebbe apparire troppo vicino al titolo del sito e all'intestazione o addirittura sovrapporsi ad esso.
Se ciò accade, puoi aggiungere quanto segue al tuo snippet CSS personalizzato:
.site-branding {
margin-top:60px !important;
}
Sostituisci semplicemente site-branding con la classe CSS della tua area di intestazione. Per ottenere queste informazioni, utilizza semplicemente lo strumento 'Ispeziona' del tuo browser e segui lo stesso processo descritto nel Metodo 2.
Bonus: Rendere i tuoi post di WordPress fissi
Se hai un blog WordPress, è una buona idea rendere alcuni dei tuoi post del blog 'sticky' (fissi). Questi possono essere gli articoli principali che includono il contenuto più importante del tuo sito o annunci e post di giveaway con cui vuoi che gli utenti interagiscano.
Quando rendi fisso un post a tua scelta, questo rimarrà in cima alla pagina del tuo blog anche quando pubblichi nuovi contenuti, che verranno mostrati sotto il post fisso.
Puoi facilmente rendere fisso il tuo post del blog aprendolo nell'editor dei contenuti. Una volta fatto, espandi semplicemente la scheda 'Riepilogo' nel pannello dei blocchi e seleziona l'opzione 'Fissa in cima al blog'.
Dopo di che, fai clic sul pulsante 'Aggiorna' o 'Pubblica' in alto per salvare le tue impostazioni. Hai ora creato con successo un post del blog fisso sul tuo sito WordPress.
Per maggiori dettagli, consulta il nostro tutorial su come creare post fissi in WordPress.
Speriamo che questo articolo ti abbia aiutato ad aggiungere un menu di navigazione fisso e fluttuante al tuo sito WordPress. Potresti anche voler consultare la nostra guida per principianti su come aggiungere un menu a pannello scorrevole nei temi WordPress e il nostro tutorial su come aggiungere icone di social media al menu di WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Dennis Muthomi
c'è un modo per far sì che il menu fisso si applichi solo a determinati post/pagine? Ad esempio, averlo non fisso sulla homepage del mio blog ma fisso ovunque altro sul sito web?
Supporto WPBeginner
If your theme does not offer that option then we would recommend the plugin for a simple method to have that conditional display
Amministratore
Mrteesurez
Ben fatto, sono felice di vedere il plugin che hai condiviso qui "menu fisso o (qualsiasi cosa) allo scorrimento". Ciò significa che può essere utilizzato per rendere fissi elementi diversi dal menu.
Inizialmente l'ho usato con codice grezzo, grazie per aver condiviso questo metodo semplice.
Dayo Olobayo
Sono d'accordo Mrteesurez, i menu fissi sono una preziosa funzionalità del sito web. Oltre a creare un menu fisso, potresti anche considerare l'incorporazione di un effetto "scroll fluido" per migliorare ulteriormente l'esperienza utente durante la navigazione tra le sezioni della tua pagina web.
Jiří Vaněk
Grazie per il tutorial. Ho sempre cercato solitamente un modello che potesse fare fondamentalmente questo. Secondo questa guida, non devo più farlo.
Supporto WPBeginner
Glad we could help open up your theme options
Amministratore
Paul
Dove lascio le 5 stelle... grazie mille!!
Supporto WPBeginner
Glad our guide was helpful
Amministratore
Jess
Grazie mille per questo post utile!!! Così chiaro e facile da seguire.
Supporto WPBeginner
Glad our guide was helpful
Amministratore
Ivaylo
Ottimo tutorial pratico. Ho seguito il Metodo 2 e ha funzionato istantaneamente, tuttavia quando apro il sito sul cellulare, i pulsanti del menu sono scomparsi. Qualcuno sa perché o come risolvere?
Saluti!
Supporto WPBeginner
Se non l'hai già fatto, ti consigliamo di verificare con il supporto del tuo tema specifico per vedere se potrebbe esserci un conflitto con il CSS del tuo tema
Amministratore
Serena Richardson
Ciao,
Come si crea un menu fisso flottante sul lato destro della pagina anziché in alto, in modo che si sposti verso il basso mentre scorri?
Grazie!
Serena
Supporto WPBeginner
Si tratterebbe di aggiungere un widget fisso, per il quale abbiamo una raccomandazione nel nostro articolo qui sotto:
https://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-widget-in-wordpress/
Amministratore
Tom Browne
Ha funzionato all'istante. Grazie
Supporto WPBeginner
You’re welcome
Amministratore
simran
livello di perfezione e il modo di presentare le informazioni... grazie..
Supporto WPBeginner
Glad our guide was helpful
Amministratore
Theo
Dove posso trovare l'ID della mia barra di navigazione?
Non riesco a trovarlo.
Supporto WPBeginner
Per fare ciò, dovresti usare l'ispezione dell'elemento. Abbiamo una guida su come usare correttamente l'ispezione dell'elemento qui sotto:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site
Amministratore
Natasha T
Mi ha salvato la vita, non so come ringraziarti abbastanza.
Supporto WPBeginner
You’re welcome
Amministratore
Tam
Hello!
Thanks for your help! It worked like magic :D.
I learn a little CSS and tried to make my nav sticky from a free theme (GeneratePress) but didn’t work. (I tried “position: sticky;” in CSS), but thank your code that helped me to fix it
Supporto WPBeginner
Glad our article was helpful
Amministratore
alexandre
Esattamente quello che stavo cercando! Ottimo plugin. Grazie
Supporto WPBeginner
You’re welcome, glad you found our recommendation helpful
Amministratore
Guy Bailey
Molte grazie per il tuo aiuto – solo una piccola domanda; lo sfondo del mio menu è trasparente quando scorro verso il basso. Ci sono soluzioni rapide o trucchi per aggiungere un colore solido dietro di esso (bianco nel nostro caso)?
Supporto WPBeginner
Dipenderebbe da come è impostato il tuo menu, ma puoi usare l'ispezione dell'elemento per trovare l'oggetto a cui puoi impostare la proprietà background-color: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Amministratore
Manish
Grazie. Quando Wpbeginner scrive un post sul blog su un argomento, è destinato ad essere utile.
Supporto WPBeginner
Glad our content has been helpful
Amministratore
Everest
Grazie mille.
Mi hai rallegrato la giornata.
Supporto WPBeginner
You’re welcome, glad we could help
Amministratore
Tony Chung
Il codice CSS ha funzionato e ho dovuto aggiungere un margine all'intestazione in modo che l'intero titolo venisse visualizzato. La mia barra dei menu si estende in cima, ma i pulsanti del menu partono da sinistra e si fermano al centro. Come faccio a spostare i pulsanti per centrarli sulla pagina?
Supporto WPBeginner
Le specifiche varierebbero da tema a tema, ma normalmente dovresti modificare il CSS. Puoi testare le modifiche usando l'ispezione dell'elemento: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Amministratore
Chinedu
Wow, funziona perfettamente.
Grazie
Supporto WPBeginner
Glad our solution worked for you
Amministratore
Gillian Davies
Ho un elenco di libri in una tabella. Ho importato le immagini delle copertine in Media, ora voglio che le immagini appaiano come un visualizzatore scorre l'elenco. Simile a un hover di riga, ma come posso farlo in una tabella creata in table maker?
Raul
Come posso rendere questo menu di navigazione fisso scorrevole?
Quindi l'ho usato per una barra laterale ma quando la barra laterale è troppo lunga non entra nello schermo e non posso scorrerla verso il basso.
Rushikesh Thawale
Ciao,
Come hai scritto il codice COME UN CODICE in questo post? Voglio dire, come si mostrano i codici HTML in questo modo in un post?
Grazie.
Tara
Probabilmente l'hai già scoperto, ma per chi sta cercando, per mostrare il tuo codice nel tuo post usa il carattere html per la parentesi di apertura nei tag html < ; senza lo spazio.
Supporto WPBeginner
Questo è un metodo, ma per questo stiamo usando il secondo metodo nel nostro articolo qui: https://www.wpbeginner.com/wp-tutorials/how-to-easily-display-code-on-your-wordpress-site/
Amministratore
Cesar
Great post! your CSS code works for me
dani
Alain
Molto utile!
grazie.
amin
Puoi anche usare "z-index: 999xxxx" per il logo o qualsiasi elemento che vuoi posizionare nella barra di navigazione
Sujith Reghu
Voglio sapere come aggiungere un menu fisso all'interno di un post o di una pagina di WordPress. Ad esempio, per un post lungo, le intestazioni e le sottointestazioni del post stesso dovrebbero essere presentate nel menu fisso in modo che un lettore possa facilmente navigare da una sezione all'altra del post. Grazie...
Zac
grazie per il tutorial!
quello che mi serve è un po' diverso, ho bisogno che appaia un 'mini-menu' quando si passa il mouse sul menu... in modo che non venga visualizzato finché non si passa il mouse... come un menu a discesa
se potessi fare questo tutorial te ne sarei grato.
amin
puoi usare un plugin mega-menu o un plugin uber menu, ma puoi farlo anche senza plugin, con css o jquery, come il menu bootstrap3