2013-08-30 16 views
13

ich benutze die bootstrap 3 navbar aber kann nicht aus irgendeinem grund die marke text farbe noch die dropdown dreiecks ändern. Ich habe ein paar Dinge ausprobiert, aber noch kein Glück ...bootstrap 3 navbar branding farbe

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

Antwort

8

In der bootstrap.css Datei:

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

ist, wo die Marke Textfarbe festgelegt ist. Ich änderte das zu color: #ff0000 und es änderte erfolgreich zu Rot. Um die Farbe des Dreiecks Dropdown zu ändern, Werte der Farbe für die Drop-Down-Dreiecke

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

Für verschiedene Farben auf schweben usw. ändern:

.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

Dies ist ein Spezifität Problem. Die Deklaration in Bootstraps CSS ist spezifischer als deine. Bitte schreiben Sie Ihre Erklärung auf diese Weise:

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

einfach mit .navbar-brand weniger spezifisch und somit ignoriert. Sie können ein wenig über Spezifität here lesen.

+0

Ich suchte hier und da nach dieser bestimmten Antwort. Kannst du mir auch sagen wie ich die 'Hover' Textfarbe von' a' in 'navbar-brand' Klasse ändern kann. – JPG

+1

Bootstrap 3 definiert dies mit dem folgenden CSS-Selektor: '.navbar-default .navbar-brand: hover', vorausgesetzt, die' navbar-brand' Klasse wird direkt auf einem 'a'-Tag verwendet. Wenn Sie das Tag "a" innerhalb des Elements mit der Klasse "navbar-brand" platzieren, lautet der Selektor in Ihrem CSS ".navbar-default .navbar-brand a: hover". – mingos

3

Wenn Ihre Stile nicht wirksam werden, dann ist dies ein Spezifitätsproblem. Verwenden Sie den Web-Inspektor in Chrome oder Safari und erfahren Sie, welche Stile verwendet werden, und auch den Selektor, mit dem diese Stile angewendet werden.

3

Wenn Ihr navbar schwarz ist Sie verwenden navbar-inverse, so dass diese Lösungen nicht funktionieren.

Also in diesem Fall Gebrauch:

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

Wenn hier andere Vorschläge für Sie funktionieren nicht nur

hinzufügen

wichtig

(Keiner von ihnen für mich gearbeitet, bis ich wichtig hinzugefügt!)

.navbar-brand { 
    color: #ffffff !important; 
} 
Verwandte Themen