Come modificare il colore per la barra di navigazione in Foundation 4?

Question

Ecco il mio sito web - http://foundation.zurb.com/docs/components/top-bar.html

Ho provato a modificare ogni possibile bit di css relativo alla barra di navigazione, ma ancora non ho trovato un modo per cambiare il suo colore.

Qualcuno potrebbe indicarmi la strada giusta? Voglio cambiare il background-color dal suo colore nerastro originale a un altro colore.

Answer 1

Il problema è che hai impostato i colori sulle singole parti della barra di navigazione per sovrascrivere il colore generale tramite. selettori più specifici.

seguire i tre passaggi riportati di seguito:

prima parte del problema:

.top-bar-section li a:not(.button) { 
    //Here is where the first part of the problem is. Change this to a different color. 
    color:black; 
} 

Si prega di notare che la parte sopra cambierà il colore di tutti gli elementi con quella di selezione (il item 1 Anche il menu a discesa nella tua pagina utilizza questo, quindi cambierà il colore di quel menu a discesa a meno che non gli venga assegnato un altro selettore).

Seconda parte:

.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] { 
    //Here is where the second part of the problem is. Change this to a different color. 
    border-left: solid 1px black; 
    border-right: solid 1px black; 
} 

Terza parte:

.top-bar-section .has-form { 
    //Here is where the third part of the problem is. Change this to a different colour. 
    background:black; 
} 

Ovviamente, se si desidera che il colore del collegamento :hover di essere ancora nero, è possibile mantenere il codice qui sotto in quanto è, in caso contrario, cambiarlo in qualsiasi colore tu voglia quando è al passaggio del mouse:

.top-bar-section li a:not(.button):hover { 
    // Potential fourth part of problem 
    background:black; 
} 

Answer 2

È così complesso cambiare il colore della barra in alto modificando il css solo che non ha senso.

Trovo molto più facile da imparare SCSS e bussola e nel mio caso di integrare le tecnologie di menzione in Visual Studio, quindi, appena modificato l'impostazione:

$topbar-bg: #111 !default; 

a

$topbar-bg: #yourColor !default; 

e tutto funziona perfettamente

e, a proposito, ottieni il bonus aggiuntivo che la bussola e il sass apportano a tutti i tuoi progetti futuri