Foundation 4のナビゲーションバーの色を変更するにはどうすればよいですか？

Question

ここに私のウェブサイトです - http://foundation.zurb.com/docs/components/top-bar.html

私はnavbarに関連するcssのすべての可能なビットを変更しようとしましたが、それでも色を変更する方法が見つかりませんでした。

誰も私に正しい道を教えてもらえますか？ background-colorを元の黒色から別の色に変更したいと思います。

Answer 1

ナビゲーションバーの各部分に色を設定して、全体の色をオーバーライドするのが問題です。より具体的なセレクタ

問題の

最初の部分：

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

一部は、上記のようセレクタですべての要素の色を変更することに注意してください（item 1

は、次の3つの手順に従ってくださいページ内のドロップダウンメニューでもこれが使用されるため、別のセレクターに指定しない限り、そのドロップダウンの色が変わります）。

第二部分：

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

第三部：あなたはまだ黒にリンク:hover色をしたい場合

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

明らかに、あなたはそれとして、以下のコードを維持することができますもしそうでなければ、あなたが望む色に変更してください：

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

Answer 2

CSSが意味をなさないことだけを修正してトップバーの色を変更するのはとても複雑です。

$topbar-bg: #yourColor !default; 

とすべてに

$topbar-bg: #111 !default; 

：ちょうど設定を変更し、私はそれがはるかに簡単SCSSとコンパスと私の場合を学ぶために見つける

が、その後は、Visual Studioに言及する技術を統合完成度は

そして、あなたの将来のすべてのプロジェクトにコンパスとサスがもたらす追加ボーナスを得る