Je souhaite modifier la couleur de l'arrière-plan et du texte d'une barre de navigation bootstrap, mais la modification ne se fait pas comme prévu... Voici mon CSS personnalisé :
.navbar-default .navbar-fnt {
color: #FFFFFF;
}
.navbar-default .navbar-backgrnd {
color: #CC3333;
}
Et le HTML correspondant :
<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>
Je n’arrive pas à comprendre pourquoi cela ne change pas la couleur du fond et du texte - quelqu’un peut-il m’aider ?
J'ai réussi à styliser ma barre navale Bootstrap à l'aide du CSS suivant. Vous n’avez pas non plus défini de police dans votre CSS, c’est pourquoi la police ne change pas. Le site pour lequel ce CSS est utilisé se trouve [ici][1].
.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*/
}
Pas besoin de la spécificité .navbar-default
dans votre CSS. La couleur de fond nécessite background-color:#cc333333
(ou simplement background:#cc3333
). Enfin, le mieux est probablement de consolider toutes vos personnalisations dans une seule classe, comme ci-dessous :
.navbar-custom {
color: #FFFFFF;
background-color: #CC3333;
}
..
<div id="menu" class="navbar navbar-default navbar-custom">
Exemple : http://www.bootply.com/OusJAAvFqR#
Ces classes sont très probablement déjà définies par Bootstrap. Assurez-vous que le fichier CSS avec lequel vous souhaitez remplacer les classes est appelé APRÈS le CSS de Bootstrap.
<link rel="stylesheet" href="css/bootstrap.css" /> <!-- Call Bootstrap first -->
<link rel="stylesheet" href="css/bootstrap-override.css" /> <!-- Call override CSS second -->
Sinon, vous pouvez mettre !important
à la fin de votre CSS comme ceci : color:#ffffff!important;
mais je vous déconseille d'utiliser !important
à tout prix.