Utilizzare le impostazioni integrate o CSS personalizzato?

Navi+ fornisce diverse opzioni di configurazione comuni per i menu, nella scheda “Design”, come sfondo, tipografia (famiglia di font, dimensione..), e icone/immagini (dimensione, intervallo, curvatura…). Utilizzando queste impostazioni, il tuo menu può solitamente essere stilizzato per abbinarsi al design e al branding complessivo del tuo sito web.

I menu di Navi+ supportano fino a 3 livelli. Nella scheda “Design”, puoi configurare solo lo stile per 2 livelli, e non c’è un’opzione diretta per impostare la dimensione del font o la dimensione dell’icona/immagine per i menu di livello 2 e livello 3. Quindi come puoi farlo?

Personalizzazione profonda del menu con lo strumento CSS & Coding

Tuttavia, se tu o il tuo sviluppatore web avete una comprensione di base del CSS (fogli di stile), potete personalizzare l’intero design del menu utilizzando lo strumento integrato “CSS & Coding” in Navi+ senza modificare direttamente i file del tema. Questo offre diversi vantaggi:

• Puoi separare le configurazioni CSS per i menu di Navi+ dal tuo tema. Questo significa che l’aggiornamento o la modifica del tuo tema non influenzerà i tuoi menu di Navi+.
• Navi+ utilizza un meccanismo di protezione intelligente aggiungendo automaticamente un prefisso (come #SF-123456789) all’inizio di ogni regola CSS. Questo mantiene il CSS per diversi menu di Navi+ isolato, riducendo al minimo il rischio di conflitti di stile.
• Se necessario, puoi comunque aggiungere CSS che influisce sull’intero sito web direttamente all’interno di Navi+, anche se questo dovrebbe essere usato con parsimonia e solo quando necessario.

Nota importante: La casella di testo Foglio di stile interno / CSS aggiunge automaticamente un prefisso (ad es., #SF-123456789) prima di ogni regola CSS. Questo assicura che il tuo CSS si applichi solo al menu specifico che stai personalizzando e previene conflitti di stile.

Alcuni casi studio tipici di utilizzo del CSS

1) Per configurare l’aspetto dell’intero menu al livello più alto, puoi scrivere un frammento che non è CSS standard ma molto semplice. Ad esempio, il frammento qui sotto cambia lo sfondo del menu in rosso. Aggiungi il seguente codice alla casella di testo Foglio di stile interno / CSS:

{
    background: red;
}

2) Configura dimensione, tipografia e colori per ciascun livello di voce di menu. Aggiungi il seguente codice alla casella di testo Foglio di stile interno / CSS:

// Personalizza lo stile del testo degli elementi di menu di livello 1
ul > li.item > .inner .name {
    font-size: 14px;
    color: red;
}

// Personalizza lo stile del testo degli elementi di menu di livello 2
ul.children[menulevel="2"] > li.child > .inner .name{
     font-size: 16px; 
     color: blue;
}

// Personalizza lo stile del testo degli elementi di menu di livello 3
ul.children[menulevel="3"] > li.child > .inner .name{
     font-size: 13px; 
     color: green;     
}

3) Cambia lo spessore del font utilizzando font-weight. Aggiungi il seguente codice alla casella di testo Foglio di stile interno / CSS:

// Imposta lo spessore del font del nome
.name {
  font-weight: 700;
}

// Imposta lo spessore del font della descrizione
.description {
  font-weight: 700;
}

4) Regola la dimensione della freccia. Aggiungi il seguente codice alla casella di testo Foglio di stile interno / CSS:

ul > li.is-parent-top::after {
  font-size: 24px !important;
}