Quelles modifications faire dans les CSS pour changer la couleur de la Navbar (barre de navigation) dans Bootstrap ?

Le framework dispose de deux types de barres de navigation : une barre claire et une barre sombre. Voici comment modifier leur couleur.

Le framework CSS Bootstrap fournit entre autres une barre de navigation prête à l'emploi pour que l'utilisateur puisse interagir facilement avec le site. Bootstrap possède 2 types de barres de navigation : une barre claire et une barre sombre.

<!-- Barre de navigation claire -->
<nav class=navbar navbar-default role=navigation></nav>
 <!-- Barre de navigation foncée -->
<nav class=navbar navbar-inverse role=navigation></nav>

Si vous n'êtes pas fan du noir et blanc, il est possible de modifier le style de la barre de navigation pour utiliser les couleurs de votre choix. Voici la feuille de style détaillée qu'il faut utiliser pour modifier les couleurs de la barre de navigation :

/* Classe principale de la barre de navigation */
.navbar-default {
 /* Couleur de fond de la barre de navigation */
 background-color: #F8F8F8;
 border-color: #E7E7E7;
}
/* Couleur des titres affichés dans la barre */
.navbar-default .navbar-brand {
 color: #777;
}
/* Couleur utilisée lors du passage de la souris sur un titre de la barre */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
 color: #5E5E5E;
}
/* Couleur utilisée pour les liens */
.navbar-default .navbar-nav > li > a {
 color: #777;
}
/* Couleur utilisée pour les liens lorsque la souris passe dessus */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
 color: #333;
}
/* Couleur utilisée pour le lien actif (celui qui est affiché sur la page) */
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
 color: #555;
 background-color: #E7E7E7;
}
/* Couleur utilisée pour un menu dépliant lorsqu'il est ouvert */
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
 color: #555;
 background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
 border-top-color: #777;
 border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
 border-top-color: #333;
 border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
 border-top-color: #555;
 border-bottom-color: #555;
}
/* Version mobile, le menu devient une icône qui déroule une liste avec le menu en vertical */
.navbar-default .navbar-toggle {
 border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
 background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
 background-color: #CCC;
}
@media (max-width: 767px) {
 .navbar-default .navbar-nav .open .dropdown-menu > li > a {
 color: #777;
 }
 .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
 .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
 color: #333;
 }
}

Vous pouvez également utiliser un fichier SCSS pour personnaliser le menu.

Voici le script à inclure dans votre site :

/* Couleur de fond pour la barre */
$couleurFondParDefaut : #e74c3c;
/* Couleur de fond pour les éléments en surbrillance ou sélectionnés */
$couleurFondEnSurbrillance : #c0392b;
/* Couleur des éléments */
$couleurParDefaut : #ecf0f1;
/* Couleur des éléments en surbrillance */
$couleurEnSurbrillance : #ffbbbc;
.navbar-default {
background-color: $couleurFondParDefaut;
border-color: $couleurFondEnSurbrillance;
.navbar-brand {
color: $couleurParDefaut;
&:hover, &:focus {
color: $couleurEnSurbrillance; }}
.navbar-text {
color: $couleurParDefaut; }
.navbar-nav {
> li {
> a {
color: $couleurParDefaut;
&:hover, &:focus {
color: $couleurEnSurbrillance; }}}
> .active {
> a, > a:hover, > a:focus {
color: $couleurEnSurbrillance;
background-color: $couleurFondEnSurbrillance; }}
> .open {
> a, > a:hover, > a:focus {
color: $couleurEnSurbrillance;
background-color: $couleurFondEnSurbrillance; }}}
.navbar-toggle {
border-color: $couleurFondEnSurbrillance;
&:hover, &:focus {
background-color: $couleurFondEnSurbrillance; }
.icon-bar {
background-color: $couleurParDefaut; }}
.navbar-collapse,
.navbar-form {
border-color: $couleurParDefaut; }
.navbar-link {
color: $couleurParDefaut;
&:hover {
color: $couleurEnSurbrillance; }}}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu {
> li > a {
color: $couleurParDefaut;
&:hover, &:focus {
color: $couleurEnSurbrillance; }}
> .active {
> a, > a:hover, > a:focus, {
color: $couleurEnSurbrillance;
background-color: $couleurFondEnSurbrillance; }}}
}