2013-08-30 37 views
13

私はブートストラップ3 navbarを使用していますが、何らかの理由でブランドテキストの色やドロップダウンの三角形を変更することはできません。私は物事のカップルを試してみたが、bootstrap.cssファイルでまだ運...ブートストラップ3 navbarブランドカラー

.navbar .nav > .navbar-brand > a { 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
    color: #d6d6d6; 
} 

.navbar-brand { 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
    color: #d6d6d6; 
} 

.navbar-brand a{ 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
    color: #d6d6d6; 
} 

答えて

8

:ブランドのテキストの色が設定されているところ

.navbar-default .navbar-brand { 
    color: #777777; 
} 

です。私はcolor: #ff0000に変更し、正常に赤に変わった。 は、ドロップダウン三角形の色を変更するドロップダウン三角形のためにホバーなどに色違いのために、ここで

.navbar-default .navbar-nav > .dropdown > a .caret { 
    border-top-color: #777777; 
    border-bottom-color: #777777; 
} 

色の値を変更するには:

.navbar-default .navbar-nav > .dropdown > a:hover .caret, 
.navbar-default .navbar-nav > .dropdown > a:focus .caret { 
    border-top-color: #333333; 
    border-bottom-color: #333333; 
} 

.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret { 
    border-top-color: #ff0000; 
    border-bottom-color: #ff0000; 
} 
31

これは、特異性の問題です。ブートストラップのCSSに含まれる宣言は、あなたのものよりも具体的です。あなたの宣言をこのように書いてください:

.navbar-default .navbar-brand { 
    color: #d6d6d6; 
} 

単純に使用して.navbar-brandはあまり具体的なので、無視しています。あなたは特異性について少し読むかもしれませんhere

+0

私はこの特定の答えを探していました。 'navbar-brand'クラスで' a 'の 'hover'テキストの色を変更する方法を教えてください。 – JPG

+1

ブートストラップ3は 'navbar-brand'クラスが' a'タグで直接使用されていると仮定して、 '.navbar-default:.navbar-brand:hover'というCSSセレクタを使ってこれを定義します。 'navbar-brand'クラスの要素の中に' a'タグを置くと、CSSのセレクタは '.navbar-default a.navbar-brand a:hover'になります。 – mingos

3

あなたのスタイルが有効でない場合、それは特異性の問題です。 ChromeやSafariでWeb Inspectorを使用すると、どのようなスタイルが有効であるか、またそれらのスタイルを適用するために使用されたセレクタが表示されます。

3

navbarが黒色の場合navbar-inverseを使用しているため、これらのソリューションは動作しません。この場合、使用中のSO

:!

.navbar-inverse .navbar-brand { 
    color: #d6d6d6; 
} 
0

あなただけ

を追加するために、ここで他の提案が動作しない場合は、重要な

私は追加まで(それらのどれも重要な私のために働いていません! )

.navbar-brand { 
    color: #ffffff !important; 
} 
関連する問題