Θέλω να αλλάξω το χρώμα του φόντου και του κειμένου σε μια bootstrap navbar
αλλά δεν αλλάζει όπως αναμένεται... Εδώ είναι το προσαρμοσμένο μου CSS:
.navbar-default .navbar-fnt {
color: #FFFFFF;
}
.navbar-default .navbar-backgrnd {
color: #CC3333;
}
Και η σχετική 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>
Δεν μπορώ να καταλάβω γιατί αυτό δεν αλλάζει το φόντο και το χρώμα του κειμένου - μπορεί κάποιος να βοηθήσει;
Έχω διαμορφώσει με επιτυχία τη γραμμή πλοήγησης του Bootstrap χρησιμοποιώντας την ακόλουθη CSS. Επίσης, δεν ορίσατε καμία γραμματοσειρά στο CSS σας, οπότε γι' αυτό η γραμματοσειρά δεν αλλάζει. Ο ιστότοπος για τον οποίο χρησιμοποιείται αυτό το CSS μπορεί να βρεθεί εδώ.
.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*/
}
Δεν χρειάζεται η ιδιαιτερότητα .navbar-default
στα CSS σας. Το χρώμα φόντου απαιτεί background-color:#cc333333
(ή απλά background:#cc3333
). Τέλος, ίσως είναι καλύτερο να ενοποιήσετε όλες τις προσαρμογές σας σε μια ενιαία κλάση, όπως παρακάτω:
.navbar-custom {
color: #FFFFFF;
background-color: #CC3333;
}
..
<div id="menu" class="navbar navbar-default navbar-custom">
Παράδειγμα: http://www.bootply.com/OusJAAvFqR#
Πιθανότατα αυτές οι κλάσεις έχουν ήδη οριστεί από το Bootstrap, βεβαιωθείτε ότι το αρχείο CSS με το οποίο θέλετε να αντικαταστήσετε τις κλάσεις καλείται ΜΕΤΑ το Bootstrap CSS.
<link rel="stylesheet" href="css/bootstrap.css" /> <!-- Call Bootstrap first -->
<link rel="stylesheet" href="css/bootstrap-override.css" /> <!-- Call override CSS second -->
Διαφορετικά, μπορείτε να βάλετε το !important
στο τέλος του CSS σας όπως παρακάτω: αλλά θα σας συμβούλευα να μην χρησιμοποιήσετε το !important
με κάθε κόστος.