Ik wil de achtergrond en tekstkleur veranderen in een bootstrap navbar
maar het'verandert niet zoals verwacht... Hier is mijn aangepaste CSS:
.navbar-default .navbar-fnt {
color: #FFFFFF;
}
.navbar-default .navbar-backgrnd {
color: #CC3333;
}
En de relevante 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>
Ik kan er niet achter komen waarom dit de achtergrond en tekstkleur niet verandert - kan iemand helpen?
Ik heb met succes mijn Bootstrap navbar gestyled met behulp van de volgende CSS. Ook heb je geen font gedefinieerd in je CSS dus daarom verandert het font niet. De site waarvoor deze CSS gebruikt is kan gevonden worden 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*/
}
Geen noodzaak voor de specificiteit .navbar-default
in uw CSS. Achtergrond kleur vereist background-color:#cc3333
(of gewoon background:#cc3333
). Tot slot, waarschijnlijk het beste om al uw aanpassingen te consolideren in een enkele klasse, zoals hieronder:
.navbar-custom {
color: #FFFFFF;
background-color: #CC3333;
}
..
<div id="menu" class="navbar navbar-default navbar-custom">
Exemplaar: http://www.bootply.com/OusJAAvFqR#
Waarschijnlijk zijn deze klassen al gedefinieerd door Bootstrap, zorg ervoor dat uw CSS bestand waarmee u de klassen wilt overschrijven, NA de Bootstrap CSS wordt genoemd.
<link rel="stylesheet" href="css/bootstrap.css" /> <!-- Call Bootstrap first -->
<link rel="stylesheet" href="css/bootstrap-override.css" /> <!-- Call override CSS second -->
Anders kunt u !important
aan het eind van uw CSS zetten zoals dit: color:#ffff!important;
maar ik raad je af om ten koste van alles !important
te gebruiken.