Ich möchte den Hintergrund und die Textfarbe in einem Bootstrap navbar
ändern, aber es ist nicht ändern, wie erwartet... Hier ist meine benutzerdefinierte CSS:
.navbar-default .navbar-fnt {
color: #FFFFFF;
}
.navbar-default .navbar-backgrnd {
color: #CC3333;
}
Und das entsprechende HTML:
<div id="menu" class="navbar navbar-default navbar-fnt navbar-backgrnd">
<div class="navbar-header">
<div class="collapse navbar-collapse">
ul and li
</div>
</div>
</div>
Ich kann nicht herausfinden, warum dies den Hintergrund und die Textfarbe nicht ändert - kann jemand helfen?
Ich habe erfolgreich meine Bootstrap-Navbar mit dem folgenden CSS gestylt. Sie haben auch keine Schriftart in Ihrem CSS definiert, deshalb ändert sich die Schriftart nicht. Die Seite, für die dieses CSS verwendet wird, finden Sie hier.
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000; /*Sets the text hover color on navbar*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #030033;
}
.navbar-default {
background-color: #0f006f;
border-color: #030033;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #66CCFF; /*change color of links in drop down here*/
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
color: white; /*Change active text color here*/
}
Sie brauchen die Besonderheit .navbar-default
in Ihrem CSS nicht. Die Hintergrundfarbe erfordert background-color:#cc333333
(oder einfach background:#cc3333
). Schließlich ist es wahrscheinlich am besten, alle Ihre Anpassungen in einer einzigen Klasse zu konsolidieren, wie unten:
.navbar-custom {
color: #FFFFFF;
background-color: #CC3333;
}
..
<div id="menu" class="navbar navbar-default navbar-custom">
Beispiel: http://www.bootply.com/OusJAAvFqR#
Höchstwahrscheinlich sind diese Klassen bereits von Bootstrap definiert. Stellen Sie sicher, dass Ihre CSS-Datei, mit der Sie die Klassen überschreiben möchten, NACH dem Bootstrap-CSS aufgerufen wird.
<link rel="stylesheet" href="css/bootstrap.css" /> <!-- Call Bootstrap first -->
<link rel="stylesheet" href="css/bootstrap-override.css" /> <!-- Call override CSS second -->
Andernfalls können Sie !important
wie folgt an das Ende Ihres CSS setzen: color:#ffffff!important;
, aber ich würde davon abraten, !important
um jeden Preis zu verwenden.