これが私のウェブサイトです - http://foundation.zurb.com/docs/components/top-bar.html
navbar に関連するすべての可能な CSS を変更しようとしましたが、まだ色を変更する方法が見つかりません。
誰かが私に正しい道を教えてくれますか? background-color
元の黒っぽい色から別の色に変えたい。
これが私のウェブサイトです - http://foundation.zurb.com/docs/components/top-bar.html
navbar に関連するすべての可能な CSS を変更しようとしましたが、まだ色を変更する方法が見つかりません。
誰かが私に正しい道を教えてくれますか? background-color
元の黒っぽい色から別の色に変えたい。
問題は、ナビゲーション バーの個々の部分に色を設定して、全体の色をオーバーライドしていることです。より具体的なセレクター。
以下の 3 つの手順に従います。
問題の最初の部分:
.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
(ページのドロップダウン メニューもこれを使用するため、別のセレクターを指定しない限り、そのドロップダウンの色が変更されます)。
第二部:
.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;
}
三分の一:
.top-bar-section .has-form {
//Here is where the third part of the problem is. Change this to a different colour.
background:black;
}
明らかに、リンク:hover
の色を黒のままにしたい場合は、以下のコードをそのままにしておくことができます。そうでない場合は、ホバーしたときに好きな色に変更します。
.top-bar-section li a:not(.button):hover {
// Potential fourth part of problem
background:black;
}
トップバーの色をcssだけで変えるのは複雑すぎて意味がありません。
scss と compass を学習する方がはるかに簡単だと思います。私の場合、言及したテクノロジを Visual Studio に統合してから、設定を変更するだけです。
$topbar-bg: #111 !default;
に
$topbar-bg: #yourColor !default;
すべてが完璧に機能します
ちなみに、コンパスとサスが将来のすべてのプロジェクトにもたらす追加のボーナスを得ることができます