Come creare un menu di navigazione fluttuante e appiccicoso in WordPress

Volete creare un menu di navigazione flottante e appiccicoso in WordPress?

Il menu di navigazione superiore contiene di solito i collegamenti a tutte le pagine più importanti. Rendendo questo menu appiccicoso, è possibile mantenerlo sullo schermo mentre l’utente scorre la pagina, in modo che sia sempre a portata di mano.

In questo articolo vi mostreremo come aggiungere facilmente un menu di navigazione flottante appiccicoso al vostro sito WordPress.

Che cos’è un menu di navigazione flottante appiccicoso?

Un menu di navigazione “sticky” o “floating” si attacca alla parte superiore dello schermo mentre l’utente scorre verso il basso, in modo da essere sempre presente sullo schermo.

Di solito, il menu di navigazione superiore di WordPress contiene i link ai contenuti più importanti del sito. Rendendo questo menu appiccicoso, i visitatori possono fare clic su questi link in qualsiasi momento senza doverli scorrere.

Se gestite un negozio online, il menu di navigazione superiore contiene in genere collegamenti a pagine destinate alla conversione, come la pagina di pagamento e il carrello dei clienti. Rendendo il menu superiore appiccicoso, spesso si può ridurre il tasso di abbandono del carrello e aumentare le vendite.

Detto questo, vediamo come creare facilmente un menu di navigazione flottante appiccicoso in qualsiasi tema WordPress o negozio WooCommerce. Utilizzate semplicemente i link rapidi qui sotto per passare al metodo che desiderate utilizzare:

Metodo 1: Aggiungere un menu appiccicoso usando le impostazioni del tema (facile)

Alcuni dei migliori temi per WordPress hanno il supporto integrato per i menu di navigazione appiccicosi. Detto questo, vale la pena di controllare le impostazioni del tema andando su Temi ” Personalizza nella dashboard di WordPress e cercando le impostazioni con l’etichetta “Menu”.

Se non siete sicuri che il vostro tema supporti i menu appiccicosi, potete controllare la documentazione del tema o anche contattare lo sviluppatore per ottenere aiuto. Per ulteriori informazioni, consultate la nostra guida su come richiedere correttamente il supporto di WordPress e ottenerlo.

Se il vostro tema non ha un supporto incorporato per i menu appiccicosi, dovrete utilizzare uno degli altri metodi indicati di seguito.

Metodo 2: Aggiungere il menu di navigazione appiccicoso utilizzando un plugin (consigliato)

Il modo più semplice per aggiungere un menu di navigazione appiccicoso in WordPress è utilizzare il plugin Sticky Menu & Sticky Header. Permette di rendere appiccicoso qualsiasi cosa, compresi i menu.

Per prima cosa, è necessario installare e attivare il plugin. Se avete bisogno di aiuto, consultate la nostra guida per principianti su come installare un plugin di WordPress.

Dopo l’attivazione, andare su Impostazioni ” Menu appiccicoso (o qualsiasi cosa!).

Per iniziare, è necessario ottenere l’ID CSS del menu di navigazione che si desidera rendere appiccicoso, utilizzando lo strumento di ispezione del browser.

È sufficiente visitare il sito web e passare il mouse sul menu di navigazione. Dopodiché, basta fare clic con il tasto destro del mouse e selezionare “Ispeziona” dal menu del browser.

Si aprirà un nuovo pannello all’interno del browser, dove si potrà vedere il codice sorgente del menu di navigazione.

È necessario trovare la riga di codice che si riferisce al menu o all’intestazione del sito. Avrà un aspetto simile a questo:

<nav id="site-navigation" class="main-navigation" role="navigation">

Se non riuscite a trovare il codice, passate il mouse sulle diverse linee di codice nel pannello “Ispezione”. Il browser evidenzierà il menu di navigazione quando si trova il codice giusto, come si può vedere nell’immagine seguente.

In questo caso, l’ID CSS del menu di navigazione è site-navigation.

Una volta ottenute queste informazioni, tornate alla vostra dashboard di WordPress e aggiungetele al campo “Elemento appiccicoso (richiesto)”.

È inoltre necessario aggiungere un carattere hash (#) all’inizio, in modo che site-navigation diventi #site-navigation.

Quindi, fare clic sul pulsante “Salva modifiche” in fondo alla pagina per memorizzare le modifiche.

Ora, se visitate il vostro sito WordPress e scorrete, il menu dovrebbe rimanere in alto.

A volte, il menu appiccicoso può sovrapporsi ad alcuni contenuti che non si desidera nascondere.

In questo caso, è necessario definire uno spazio tra la parte superiore dello schermo e il menu di navigazione appiccicoso, digitando un numero nel campo “Spazio tra la parte superiore della pagina e l’elemento appiccicoso”.

I menu appiccicosi possono causare problemi ai dispositivi con schermi più piccoli, come i dispositivi mobili. Per questo motivo, è bene controllare la versione mobile del vostro sito WordPress dal desktop.

Se non si è soddisfatti dell’aspetto del menu, è possibile “disinstallarlo” per gli utenti mobili trovando il seguente campo: “Non attaccare l’elemento quando lo schermo è più piccolo di”.

Qui, digitare “780px”.

Ci sono altre impostazioni da esplorare, ma questo è tutto ciò che serve per creare un menu di navigazione appiccicoso funzionante.

Quando si è soddisfatti della configurazione del menu di navigazione, fare clic su “Salva modifiche” per memorizzare le impostazioni.

Metodo 3: Aggiungere un menu di navigazione fluttuante appiccicoso usando il codice

È anche possibile creare un menu di navigazione appiccicoso utilizzando i CSS.

Il modo migliore per aggiungere codice personalizzato a WordPress è usare WPCode. È il miglior plugin di snippets di codice che consente di aggiungere CSS, PHP, HTML e altro ancora.

Poiché non si modificano direttamente i file del tema, si possono evitare molti errori comuni di WordPress. È inoltre possibile aggiornare il tema o passare a un tema completamente diverso senza perdere il codice personalizzato.

È anche possibile attivare e disattivare il menu appiccicoso con un solo clic.

Per prima cosa, è necessario installare e attivare il plugin gratuito WPCode. Per ulteriori informazioni, consultate la nostra guida passo-passo su come installare un plugin di WordPress.

Una volta attivato il plugin, andate alla pagina Code Snippets ” + Add Snippet dove vedrete tutti gli snippet WPCode già pronti che potete aggiungere al vostro sito.

Questi includono uno snippet che consente di disabilitare completamente i commenti, di caricare tipi di file che WordPress di solito non supporta, di disabilitare le pagine degli allegati e molto altro ancora.

Qui basta passare il mouse su “Aggiungi il tuo codice personalizzato (nuovo snippet)” e fare clic sul pulsante “Usa snippet” quando appare.

Nella schermata successiva, è necessario digitare un titolo per lo snippet di codice. Questo è solo un riferimento, quindi si può usare qualsiasi cosa si voglia.

Quindi, aprire il menu a tendina “Tipo di codice” e scegliere “Snippet CSS”.

Fatto ciò, aggiungere il seguente snippet all’editor di codice di 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. È possibile utilizzare qualsiasi colore modificando il codice esadecimale accanto allo sfondo.

Ad esempio, utilizzando background: #ffffff si otterrà uno sfondo bianco per il menu. Se non si è sicuri del codice esadecimale da utilizzare, si può consultare una risorsa come HTML color code.

È inoltre necessario sostituire #site-navigation con l’ID CSS del menu di navigazione. Per trovare questo codice, basta seguire la stessa procedura descritta sopra.

Quando si è soddisfatti del codice, fare clic sulla levetta “Inattivo” in modo che diventi “Attivo”, quindi fare clic sul pulsante “Salva snippet”.

Ora, se visitate il vostro blog o sito web WordPress, vedrete il menu di navigazione fluttuante appiccicoso in azione.

A seconda del tema, a volte il menu di navigazione può apparire sotto l’intestazione del sito anziché sopra. In questo caso, il menu di navigazione appiccicoso potrebbe apparire troppo vicino al titolo e all’intestazione del sito o addirittura sovrapporsi ad essi.

Se ciò accade, si può aggiungere quanto segue allo snippet CSS personalizzato:

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

È sufficiente sostituire site-branding con la classe CSS dell’area dell’intestazione. Per ottenere queste informazioni, è sufficiente utilizzare lo strumento “Ispezione” del browser e seguire la stessa procedura descritta nel metodo 2.

Bonus: rendere i post di WordPress appiccicosi

Se avete un blog WordPress, è una buona idea rendere appiccicosi alcuni dei vostri post. Può trattarsi di articoli pilastro che includono i contenuti più importanti del vostro sito o di annunci e omaggi con cui volete che gli utenti interagiscano.

Quando si rende appiccicoso un post di propria scelta, questo rimarrà in cima alla pagina del blog anche quando si pubblicheranno nuovi contenuti, che verranno mostrati sotto il post appiccicoso.

È possibile rendere facilmente appiccicoso il post del blog aprendolo nell’editor dei contenuti. Una volta fatto ciò, è sufficiente espandere la scheda “Sommario” nel pannello dei blocchi e selezionare l’opzione “Appiccica all’inizio del blog”.

Dopodiché, fate clic sul pulsante “Aggiorna” o “Pubblica” in alto per memorizzare le impostazioni. Ora avete creato con successo un post appiccicoso sul vostro sito WordPress.

Per maggiori dettagli, consultate il nostro tutorial su come creare post appiccicosi in WordPress.

Speriamo che questo articolo vi abbia aiutato ad aggiungere un menu di navigazione flottante al vostro sito WordPress. Potreste anche consultare la nostra guida per principianti su come aumentare il traffico del vostro blog e il nostro confronto tra i migliori plugin di page builder per WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.