Bir bootstrap navbar
da arka plan ve metin rengini değiştirmek istiyorum, ancak beklendiği gibi değişmiyor ... İşte benim özel CSS'im:
.navbar-default .navbar-fnt {
color: #FFFFFF;
}
.navbar-default .navbar-backgrnd {
color: #CC3333;
}
Ve ilgili 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>
Bunun neden arka planı ve metin rengini değiştirmediğini anlayamıyorum - biri yardımcı olabilir mi?
Bootstrap navbar'ımı aşağıdaki CSS'yi kullanarak başarıyla şekillendirdim. Ayrıca CSS'nizde herhangi bir yazı tipi tanımlamadınız, bu yüzden yazı tipi değişmiyor. Bu CSS'in kullanıldığı siteyi burada bulabilirsiniz.
.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*/
}
CSS'nizde .navbar-default' özelliğine gerek yoktur. Arka plan rengi
background-color:#cc333333(veya sadece
background:#cc3333`) gerektirir. Son olarak, muhtemelen en iyisi tüm özelleştirmelerinizi aşağıdaki gibi tek bir sınıfta birleştirmektir:
.navbar-custom {
color: #FFFFFF;
background-color: #CC3333;
}
..
<div id="menu" class="navbar navbar-default navbar-custom">
Büyük olasılıkla bu sınıflar Bootstrap tarafından zaten tanımlanmıştır, sınıfları geçersiz kılmak istediğiniz CSS dosyanızın Bootstrap CSS'den SONRA adlandırıldığından emin olun.
<link rel="stylesheet" href="css/bootstrap.css" /> <!-- Call Bootstrap first -->
<link rel="stylesheet" href="css/bootstrap-override.css" /> <!-- Call override CSS second -->
Aksi takdirde, CSS'nizin sonuna aşağıdaki gibi !important
koyabilirsiniz: color:#ffffff!important;ancak ne pahasına olursa olsun
!important` kullanmamanızı tavsiye ederim.