Il menu navigazione WordPress CSS può diventare più leggibile aggiungendo indicatori per le voci con sottomenu, una spaziatura coerente e uno stato attivo facilmente riconoscibile. Le modifiche possono essere inserite in Aspetto > Personalizza > CSS aggiuntivo nei temi classici oppure nel pannello degli stili dell’Editor del sito nei temi a blocchi. WordPress assegna automaticamente classi come menu-item-has-children, current-menu-item e current-menu-ancestor, che permettono di applicare lo stile senza modificare i file del tema. Il metodo è reversibile e non richiede plugin aggiuntivi.

Quali classi usa WordPress per il menu di navigazione

WordPress aggiunge classi CSS specifiche agli elementi del menu, purché il menu sia creato con il sistema di navigazione nativo di WordPress. La classe menu-item-has-children identifica una voce che contiene almeno un sottomenu, mentre current-menu-item indica la pagina attualmente visualizzata.

Le classi più utili per personalizzare il menu navigazione WordPress CSS sono:

menu-item-has-children, applicata alle voci che contengono un sottomenu.
current-menu-item, applicata alla voce collegata alla pagina corrente.
current-menu-parent, applicata al genitore diretto della pagina corrente.
current-menu-ancestor, applicata a un antenato della voce attiva.
current_page_item, presente soprattutto nei menu che mostrano pagine del sito.
current_page_parent, utile per evidenziare la sezione principale di una pagina.

Le classi possono essere controllate con gli strumenti per sviluppatori di Google Chrome, Microsoft Edge o Mozilla Firefox. Facendo clic con il tasto destro su una voce del menu e scegliendo “Ispeziona”, è possibile verificare la struttura HTML effettivamente generata dal tema.

Un tema può usare contenitori diversi, come .main-navigation, .site-navigation, .wp-block-navigation o .primary-menu. Per questo motivo è importante controllare il selettore reale prima di applicare il CSS, soprattutto quando le regole sembrano non avere effetto.

Come aggiungere indicatori alle voci con sottomenu

Un indicatore visivo aiuta l’utente a capire che una voce apre altre pagine. Il metodo più semplice consiste nell’utilizzare lo pseudo-elemento ::after sulla voce che possiede la classe menu-item-has-children.

Prima di procedere, apri Aspetto > Personalizza > CSS aggiuntivo, incolla le regole e fai clic su “Pubblica”. Il percorso può cambiare nei temi moderni: con un tema a blocchi, la modifica si trova generalmente in Aspetto > Editor > Stili > CSS aggiuntivo, se il tema consente CSS personalizzato.

Il codice seguente usa il contenitore generico .main-navigation. Se il tema utilizza un altro contenitore, sostituisci .main-navigation con la classe individuata tramite gli strumenti per sviluppatori.

.main-navigation .menu-item-has-children > a::after {
content: "▾";
display: inline-block;
margin-left: 0.45rem;
font-size: 0.75em;
line-height: 1;
vertical-align: middle;
transition: transform 0.2s ease;
}

.main-navigation .menu-item-has-children:hover > a::after,
.main-navigation .menu-item-has-children:focus-within > a::after {
transform: rotate(180deg);
}

Lo pseudo-elemento ::after non modifica il testo del collegamento e non aggiunge un nuovo elemento HTML. La regola :focus-within mantiene l’indicatore coerente anche quando l’utente naviga con tastiera e il focus passa a un collegamento del sottomenu.

Se il tema mostra già una freccia, il nuovo indicatore può apparire doppio. In quel caso è preferibile modificare la regola esistente del tema oppure disattivare una delle due frecce, invece di sovrapporre più pseudo-elementi.

Come regolare spaziatura e dimensioni del menu

La spaziatura del menu deve separare chiaramente le voci senza rendere la barra di navigazione troppo larga. Per i menu orizzontali, il modo più prevedibile consiste nell’applicare gap al contenitore che usa display: flex. Se il tema non supporta questa struttura, si può usare un margine laterale sui collegamenti.

Per un menu orizzontale basato sulla struttura tipica di WordPress, aggiungi queste regole:

.main-navigation > ul,
.main-navigation .menu {
display: flex;
align-items: center;
gap: 1.25rem;
margin: 0;
padding: 0;
list-style: none;
}

.main-navigation > ul > li > a,
.main-navigation .menu > li > a {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
padding: 0.65rem 0.2rem;
text-decoration: none;
}

gap crea uno spazio uniforme tra gli elementi principali e non aggiunge distanza indesiderata all’esterno del menu. Il valore min-height aumenta l’area cliccabile, mentre padding migliora la leggibilità e l’utilizzo su dispositivi touch.

Se il menu del tema è verticale, non forzare display: flex sul contenitore senza verificare il layout. In molti casi è sufficiente intervenire sui collegamenti:

.main-navigation ul ul a {
display: block;
padding: 0.55rem 0.9rem;
}

.main-navigation ul ul {
min-width: 13rem;
padding: 0.5rem 0;
}

Le unità rem seguono la dimensione del carattere principale del documento e si adattano meglio alle impostazioni di accessibilità rispetto a valori fissi in pixel. Dopo aver salvato il CSS, controlla il menu su schermi stretti: alcuni temi trasformano la navigazione orizzontale in un pulsante mobile con classi completamente diverse.

Come evidenziare la voce attiva e la sezione corrente

La classe current-menu-item consente di evidenziare la pagina attualmente aperta. Per una navigazione gerarchica, è utile includere anche current-menu-ancestor, perché mostra all’utente la sezione del sito in cui si trova.

Il seguente esempio modifica colore, peso del carattere e indicatore inferiore:

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current-menu-parent > a {
color: #155eef;
font-weight: 700;
}

.main-navigation .current-menu-item > a::before,
.main-navigation .current-menu-ancestor > a::before,
.main-navigation .current-menu-parent > a::before {
content: "";
display: block;
height: 3px;
margin-bottom: 0.25rem;
border-radius: 999px;
background-color: currentColor;
}

L’uso di currentColor mantiene la barra dello stesso colore del testo attivo. Tuttavia, il selettore ::before può spostare leggermente il contenuto verticale del collegamento, soprattutto se il menu non ha un’altezza uniforme. Per evitare questo effetto, è possibile usare un bordo inferiore:

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current-menu-parent > a {
border-bottom: 3px solid currentColor;
}

Quando il bordo modifica l’altezza percepita della voce, imposta un bordo trasparente anche sulle voci normali:

.main-navigation li > a {
border-bottom: 3px solid transparent;
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current-menu-parent > a {
border-bottom-color: #155eef;
}

Per distinguere il passaggio del mouse dallo stato attivo, usa una regola separata. Il colore :hover non deve essere l’unico segnale, perché non è disponibile su tutti i dispositivi touch.

.main-navigation li > a:hover,
.main-navigation li > a:focus-visible {
color: #155eef;
}

.main-navigation li > a:focus-visible {
outline: 3px solid rgba(21, 94, 239, 0.35);
outline-offset: 3px;
}

:focus-visible deve essere scritto senza spazio tra i due punti e il nome della pseudo-classe; la sintassi corretta è presente nel blocco di codice. L’indicatore di focus è importante per chi naviga usando la tastiera e non dovrebbe essere rimosso con outline: none.

Come rendere il CSS compatibile con menu mobile e temi a blocchi

Il menu mobile di un tema WordPress può essere nascosto fino alla pressione di un pulsante. Le regole applicate ai sottomenu desktop non devono interferire con il pannello mobile, perché il tema potrebbe gestire apertura, posizionamento e visibilità tramite JavaScript.

Per ridurre il rischio di conflitti, limita i selettori alle voci principali e non usare regole globali come ul { ... } o a { ... }. Un selettore più specifico, come .main-navigation > ul > li > a, modifica soltanto il livello desiderato.

Nei temi a blocchi, il blocco Navigazione può utilizzare classi come .wp-block-navigation, mentre nei temi classici sono frequenti .main-navigation e .primary-menu. Un esempio mirato per il blocco Navigazione è il seguente:

.wp-block-navigation .wp-block-navigation-item__content {
padding: 0.65rem 0.8rem;
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
color: #155eef;
font-weight: 700;
}

Dopo ogni modifica, verifica desktop, tablet e smartphone, oltre agli stati normale, attivo, hover e focus. Svuota la cache del plugin, del tema o della rete di distribuzione dei contenuti se il nuovo stile non appare subito.

Il menu navigazione WordPress CSS funziona meglio quando indicatori, spaziatura e stato attivo vengono applicati alle classi native generate da WordPress.

Potrebbe interessarti anche:

FAQ

Nei temi classici usa Aspetto > Personalizza > CSS aggiuntivo. Nei temi a blocchi usa l’Editor del sito e verifica se il tema mette a disposizione il campo per il CSS personalizzato.

La pagina corrente usa generalmente current-menu-item. Per evidenziare anche la sezione di appartenenza, aggiungi current-menu-ancestor e current-menu-parent.

Usa lo pseudo-elemento ::after insieme alla classe menu-item-has-children, applicandolo al collegamento diretto della voce principale.

Il tema potrebbe usare un contenitore diverso da .main-navigation, oppure il CSS del tema potrebbe avere selettori più specifici. Controlla la classe HTML con gli strumenti per sviluppatori e aggiorna il selettore.

Può accadere se i selettori sono troppo generici. Limita le regole al contenitore e al livello del menu interessato, poi verifica il comportamento nella visualizzazione mobile.

Altri articoli di questa serie: