Wie ändere ich die Farbe für die Navigationsleiste in Foundation 4?

Question

Hier ist meine Website - http://foundation.zurb.com/docs/components/top-bar.html

Ich habe versucht, auf die navbar alle möglichen Bit von CSS zu ändern verwandt, aber noch habe ich nicht einen Weg zu ändern, es ist Farbe gefunden.

Kann mir jemand auf den richtigen Weg zeigen? Ich möchte das background-color von seiner ursprünglichen schwärzlichen Farbe zu einer anderen Farbe ändern.

Answer 1

Das Problem ist, dass Sie die Farben auf den einzelnen Teilen der Navigationsleiste eingestellt haben, um die Gesamtfarbe über zu überschreiben. spezifischere Selektoren.

Folgen Sie den drei Schritten:

Erster Teil des Problems:

.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; 
} 

Bitte beachten Sie, dass der Teil über die Farbe aller Elemente mit dem Selektor ändern (die item 1 Drop-Down-Menü in Ihrer Seite verwendet auch dies, so wird es die Farbe dieses Dropdown-Menüs ändern, es sei denn, Sie geben ihm einen anderen Selektor).

Zweiter Teil:

.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; 
} 

Dritter Teil:

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

Selbstverständlich, wenn Sie die Verbindung :hover Farbe wünschen noch schwarz sein, können Sie den Code unten halten, wie es Ist dies nicht der Fall, ändern Sie die Farbe in die gewünschte Farbe:

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

Answer 2

Ist so komplex, um die Farbe der oberen Leiste durch Ändern der CSS nur ändern, dass es keinen Sinn macht.

Ich finde es viel einfacher SCSS und Kompass und in meinem Fall zu lernen, integrieren die Erwähnung Technologien in Visual Studio, dann, nur die Einstellung geändert:

$topbar-bg: #111 !default; 

zu

$topbar-bg: #yourColor !default; 

und alles funktioniert perfekt

und nebenbei erhalten Sie den zusätzlichen Bonus, den Kompass und Hass zu all Ihren zukünftigen Projekten bringen