Jak zmienić kolor paska nawigacyjnego w Fundacji 4?

Question

Oto moja strona internetowa - http://foundation.zurb.com/docs/components/top-bar.html

Próbowałem zmienić każdy możliwy bit css związany z navbarem, ale wciąż nie znalazłem sposobu na zmianę jego koloru.

Czy ktoś może wskazać mi właściwą drogę? Chcę zmienić background-color z oryginalnego czarnawego na inny kolor.

Answer 1

Problem polega na tym, że ustawiłeś kolory poszczególnych części paska nawigacji, aby nadpisać cały kolor. bardziej szczegółowe selektory.

Wykonaj trzy czynności:

Pierwsza część problemu:

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

proszę zauważyć że część powyżej zmieni kolor wszystkich elementów z tego selektora (the item 1 rozwijane menu na twojej stronie również tego używa, więc zmieni kolor tego menu, chyba że dasz mu inny selektor).

część druga:

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

Trzecia część:

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

Oczywiście, jeśli chcesz, aby kolor Link :hover aby nadal być czarne, można zachować poniższy kod za nim jeśli nie, zmień go na dowolny kolor, który ma być wyświetlany w ukryciu:

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

Answer 2

Jest tak skomplikowana, aby zmienić kolor górnego paska, modyfikując tylko css, co nie ma sensu.

uważam, że o wiele łatwiej nauczyć SCSS i kompas iw moim przypadku zintegrowania technologii wzmianka z Visual Studio, a następnie, po prostu zmodyfikowane ustawienie:

$topbar-bg: #111 !default; 

do

$topbar-bg: #yourColor !default; 

wszystko działa perfekcyjnie

a przy okazji, otrzymasz dodatkowy bonus, który kompas i sass przynoszą do wszystkich Twoich przyszłych projektów