Saya ingin mengubah latar belakang dan warna teks di navbar
bootstrap tetapi tidak berubah seperti yang diharapkan.... Berikut adalah CSS kustom saya:
.navbar-default .navbar-fnt {
color: #FFFFFF;
}
.navbar-default .navbar-backgrnd {
color: #CC3333;
}
Dan HTML yang relevan:
<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>
Saya tidak tahu mengapa ini tidak mengubah latar belakang dan warna teks - adakah yang bisa membantu?
Saya telah berhasil menata navbar Bootstrap saya menggunakan CSS berikut. Anda juga tidak mendefinisikan font apa pun di CSS Anda sehingga itulah sebabnya font tidak berubah. Situs yang menggunakan CSS ini dapat ditemukan di sini.
.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*/
}
Tidak perlu kekhususan .navbar-default
dalam CSS Anda. Warna latar belakang memerlukan background-color:#cc333333
(atau hanya background:#cc3333
). Akhirnya, mungkin yang terbaik adalah mengkonsolidasikan semua kustomisasi Anda ke dalam satu kelas, seperti di bawah ini:
.navbar-custom {
color: #FFFFFF;
background-color: #CC3333;
}
..
<div id="menu" class="navbar navbar-default navbar-custom">
Contoh: http://www.bootply.com/OusJAAvFqR#
Kemungkinan besar kelas-kelas ini sudah didefinisikan oleh Bootstrap, pastikan bahwa file CSS Anda yang ingin Anda timpa kelas-kelas tersebut disebut SETELAH CSS Bootstrap.
<link rel="stylesheet" href="css/bootstrap.css" /> <!-- Call Bootstrap first -->
<link rel="stylesheet" href="css/bootstrap-override.css" /> <!-- Call override CSS second -->
Jika tidak, Anda dapat meletakkan !important
di akhir CSS Anda seperti ini: warna:#ffffff!penting;
tetapi saya akan menyarankan agar Anda tidak menggunakan !penting
dengan cara apa pun.