Può essere frustrante quando il menu di navigazione di WordPress si sposta improvvisamente dietro la barra di amministrazione. Abbiamo visto che questo accade a molti utenti, specialmente dopo aver installato un nuovo tema o attivato determinati plugin.
Questo problema è più comune di quanto si pensi. Molti temi di WordPress non tengono conto dello spazio occupato dalla barra degli strumenti di amministrazione mostrata agli utenti connessi, il che può spostare il menu fuori posto.
In questa guida, ti mostreremo diversi modi per correggere il menu di navigazione di WordPress che appare sotto la barra di amministrazione. Sia che tu voglia una soluzione rapida non tecnica o una soluzione CSS pulita, troverai un metodo che funziona per il tuo sito.
Perché la barra di amministrazione di WordPress si sovrappone al menu di navigazione?
Se il tuo menu di navigazione di WordPress sembra essere nascosto o sovrapposto alla barra di amministrazione, potresti avere a che fare con un comune problema di visualizzazione.
Abbiamo visto questo problema verificarsi quando il CSS di un tema non tiene adeguatamente conto dell'altezza della barra di amministrazione. Il CSS oscura quindi parti dell'intestazione del tuo sito, incluso il menu di navigazione.
Potresti notare che alcuni elementi del menu sono difficili da cliccare o che l'intero menu è parzialmente coperto quando visualizzi il tuo sito. Questo può essere frustrante, specialmente quando influisce sull'usabilità del tuo sito web.
Ci sono alcune ragioni comuni per cui questo potrebbe accadere:
- Conflitti del tema: A volte, il CSS del tuo tema non tiene conto della barra di amministrazione, causando il posizionamento errato del menu.
- Conflitti tra plugin: Un plugin che modifica il design del front-end potrebbe causare involontariamente la sovrapposizione del menu con la barra di amministrazione. Questo può includere plugin che aggiungono mega menu o banner nell'intestazione.
- CSS personalizzato: Se hai aggiunto CSS personalizzato al tuo sito, potrebbe interferire con la corretta visualizzazione del tuo menu.
Questo problema può influire sull'usabilità del tuo sito, rendendo più difficile la navigazione per gli utenti. Fortunatamente, ci sono diversi modi per risolvere questo problema, a partire da una soluzione semplice che non richiede alcuna codifica.
Ecco una panoramica delle soluzioni che ti mostreremo. Puoi passare a quella con cui ti senti più a tuo agio:
- Soluzione 1: Nascondi la barra di amministrazione tramite le impostazioni del profilo utente
- Soluzione 2: Risolvi la sovrapposizione con CSS personalizzato
- Soluzione 3: Verifica conflitti tra plugin
- Risorse aggiuntive per l'amministrazione di WordPress
Soluzione 1: Nascondi la barra di amministrazione tramite le impostazioni del profilo utente
Questo è il modo più semplice per risolvere il problema se non ti senti a tuo agio nell'aggiungere codice. Funziona bene per principianti o utenti che non hanno il permesso di modificare il tema o aggiungere CSS personalizzato.
Invece di correggere il layout, questo metodo nasconde completamente la barra di amministrazione in modo che non copra più il menu.
Attenzione: Nascondere la barra di amministrazione significa che non vedrai più collegamenti rapidi per modificare post, gestire commenti o accedere agli aggiornamenti dei plugin mentre navighi sul tuo sito.
Inoltre, questa impostazione si applica solo al tuo account utente. Se altri utilizzano il sito, dovranno seguire gli stessi passaggi descritti di seguito.
Per fare ciò, accedi alla tua bacheca di WordPress e vai su Utenti » Profilo nel menu a sinistra.
Scorri verso il basso fino alla sezione Barra degli strumenti e deseleziona la casella che dice 'Mostra barra degli strumenti durante la visualizzazione del sito'.
Fai clic sul pulsante 'Aggiorna profilo' in fondo per salvare le modifiche.
Perché funziona
Disattivando la barra di amministrazione, rimuovi l'elemento che sta spingendo il menu fuori posto. È una semplice soluzione alternativa che evita problemi di layout più profondi, specialmente sui siti in cui solo gli utenti connessi vedono il problema.
Soluzione 2: Risolvi la sovrapposizione con CSS personalizzato
Se ti senti a tuo agio nell'usare codice personalizzato e desideri una soluzione a lungo termine, allora aggiungere CSS è la strada da percorrere. Questo ti consente di controllare esattamente come si comporta l'intestazione, senza disattivare la barra di amministrazione.
Ti consigliamo di utilizzare il plugin WPCode per aggiungere in modo sicuro CSS personalizzato. Funziona con qualsiasi tema e ti consente di applicare la tua correzione solo per gli utenti connessi (poiché gli ospiti non vedono la barra di amministrazione).
Passaggio 1: Ispeziona l'elemento dell'intestazione
Fai clic con il pulsante destro del mouse sull'intestazione o sul menu di navigazione del tuo sito e scegli 'Ispeziona' nel tuo browser. Questo aprirà gli strumenti per sviluppatori.
Passa il mouse sopra l'HTML.
Il browser evidenzierà l'elemento corrispondente sulla pagina.
Cerca una classe o un ID che racchiuda la tua navigazione. Lo userai nel tuo CSS personalizzato.
Passaggio 2: Installa WPCode
Installa e attiva il plugin WPCode. È facile da usare per i principianti e ti consente di aggiungere codice senza modificare i file del tema.
Puoi usare la versione gratuita per questo tutorial, ma la versione Pro offre funzionalità aggiuntive per progetti più grandi.
Passaggio 3: Aggiungi lo snippet CSS
Vai su Snippet di codice » Aggiungi snippet e scegli 'Aggiungi il tuo codice personalizzato (Nuovo snippet)'.
Innanzitutto, dai un nome descrittivo al tuo snippet. In questo modo potrai ricordare facilmente a cosa serve in seguito. Lo chiameremo 'Correggi barra di amministrazione sovrapposta'.
Quindi, seleziona 'Snippet CSS' come tipo di codice.
Dopodiché, incolla questo codice CSS nell'editor:
.logged-in .main-navigation {
margin-top: 32px;
z-index: 9999;
position: relative;
}
Questo si rivolge al menu di navigazione solo per gli utenti con accesso effettuato, risolvendo il problema senza modificare l'aspetto del sito per i visitatori.
Se il tuo tema utilizza una classe o un ID diverso, sostituisci .main-navigation con quello dello strumento Ispeziona.
Passaggio 4: Usa la logica condizionale intelligente
Scorri fino alla sezione 'Logica condizionale intelligente' in WPCode e attivala.
Imposta la condizione su 'Mostra' se 'Accesso effettuato' è 'Vero'.
Quindi fai clic su 'Salva snippet' e passa da Inattivo ad Attivo.
Ora visita il tuo sito e verifica se il menu appare sopra la barra di amministrazione.
In caso contrario, modifica il margin-top o regola il tuo selettore.
Perché funziona
Alcuni temi non tengono conto dell'altezza di 32px della barra di amministrazione. Questo CSS aggiunge spazio e porta la tua intestazione in primo piano, correggendo il layout solo per gli utenti che vedono la barra di amministrazione.
Soluzione 3: Verifica conflitti tra plugin
Se il menu appare ancora sotto la barra di amministrazione dopo aver provato le soluzioni precedenti, un conflitto di plugin potrebbe esserne la causa.
Alcuni plugin aggiungono il proprio CSS o JavaScript, che potrebbero interferire accidentalmente con il layout del tuo tema, specialmente se modificano l'area dell'intestazione o della navigazione.
Abbiamo visto accadere questo sui siti dei clienti e individuare il plugin in conflitto spesso risolve il problema senza dover toccare alcun codice.
Passaggio 1: Disattiva tutti i plugin
Vai alla tua bacheca e dirigiti su Plugin » Plugin installati.
Seleziona tutti i plugin utilizzando la casella di controllo in alto, scegli 'Disattiva' dal menu delle azioni di massa e fai clic su 'Applica'.
Ora visita il tuo sito web. Se il menu di navigazione appare normale, allora uno dei plugin era probabilmente il colpevole.
Passaggio 2: Riattiva i plugin uno per uno
Torna alla schermata ‘Plugin installati’ e riattiva ogni plugin singolarmente. Dopo ognuno, ricarica il tuo sito e controlla il menu.
Continua così finché il problema non si ripresenta. L'ultimo plugin che hai attivato è quello che causa il conflitto.
Passaggio 3: Decidi cosa fare
Una volta identificato il plugin problematico, hai alcune opzioni. Innanzitutto, prova a contattare lo sviluppatore del plugin per supporto. Potrebbe già essere a conoscenza del problema o suggerire una soluzione temporanea.
Se non è disponibile una soluzione, puoi cercare un plugin alternativo che offra funzionalità simili senza causare problemi di layout.
Risorse aggiuntive per l'amministrazione di WordPress
Ecco alcune risorse aggiuntive che potrebbero esserti utili:
- Come disabilitare la barra di amministrazione di WordPress per tutti gli utenti tranne gli amministratori
- Come risolvere il problema della barra di amministrazione mancante in WordPress (Metodi)
- Come risolvere il problema dell'editor dei file del tema mancante nell'amministrazione di WordPress (Soluzione facile)
- Come aggiungere collegamenti di scelta rapida personalizzati alla barra degli strumenti di amministrazione di WordPress
- Guida per principianti alla risoluzione degli errori di WordPress (passo dopo passo)
Speriamo che le soluzioni che abbiamo condiviso risolvano il problema della barra di amministrazione che causa il problema di visualizzazione del menu di navigazione o dell'intestazione sul tuo sito web.
Potresti anche voler consultare il nostro manuale su come risolvere gli errori più comuni di WordPress o dare un'occhiata ai nostri suggerimenti per personalizzare l'area di amministrazione di WordPress in base alle tue esigenze.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Samuel
Poco tempo fa, mentre lavoravo per un cliente, ho avuto questo problema, ed è stato risolto modificando il CSS del tema, questo perché capisco il CSS. Questo articolo ha presentato un altro metodo che normalmente verrebbe in mente quando si tratta di questo tipo di problema. è sempre bene essere armati di vari modi per risolvere i problemi di WordPress. Ora ho altre opzioni nel caso mi imbatti di nuovo in questo. articolo molto utile. grazie.