Chcem zmeniť farbu pozadia a textu v bootstrape navbar
, ale nemení sa podľa očakávania... Tu je môj vlastný CSS:
.navbar-default .navbar-fnt {
color: #FFFFFF;
}
.navbar-default .navbar-backgrnd {
color: #CC3333;
}
A príslušné 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>
Neviem'prísť na to, prečo to nezmení farbu pozadia a textu - môže mi niekto pomôcť?
Úspešne som naštajloval navigačný panel Bootstrap pomocou nasledujúceho CSS. Taktiež ste v CSS nedefinovali žiadne písmo, takže preto sa písmo nemení. Stránku, pre ktorú je toto CSS použité, nájdete tu.
.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*/
}
Vo vašom CSS nie je potrebné používať špecifikum .navbar-default
. Farba pozadia vyžaduje background-color:#cc333333
(alebo len background:#cc3333
). Nakoniec, pravdepodobne bude najlepšie zlúčiť všetky vaše úpravy do jednej triedy, ako je uvedené nižšie:
.navbar-custom {
color: #FFFFFF;
background-color: #CC3333;
}
..
<div id="menu" class="navbar navbar-default navbar-custom">
Príklad: http://www.bootply.com/OusJAAvFqR#
S najväčšou pravdepodobnosťou sú tieto triedy už definované systémom Bootstrap, uistite sa, že váš súbor CSS, ktorým chcete triedy prepísať, sa volá PO súbore CSS systému Bootstrap.
<link rel="stylesheet" href="css/bootstrap.css" /> <!-- Call Bootstrap first -->
<link rel="stylesheet" href="css/bootstrap-override.css" /> <!-- Call override CSS second -->
V opačnom prípade môžete na koniec svojho súboru CSS umiestniť !important
takto: color:#ffffff!important;
ale neodporúčam používať !important
za každú cenu.