Changer la couleur de la barre de navigation dans Twitter Bootstrap

Question

Comment puis-je modifier la feuille de style en cascade pour changer la couleur de la barre de navigation dans Twitter Bootstrap ?

Answer 1

tl;dr - TWBSColor - Générez votre propre barre navale Bootstrap

Notes de version : - Outil en ligne : Bootstrap 3.3.2+ / 4.0.0+. - Cette réponse : Bootstrap 3.0.x

Barres de navigation disponibles

Vous avez deux barres de navigation de base :

<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

Utilisation des couleurs par défaut

Voici les principales couleurs et leur utilisation :

• #F8F8F8 : fond de la barre de navigation
• #E7E7E7 : bordure de la barre de navigation
• #777 : couleur par défaut
• #333 : couleur au survol ( #5E5E5E pour .nav-brand )
• #555 : couleur active
• #D5D5D5 : fond actif

Style par défaut

Si vous voulez mettre un style personnalisé, voici le CSS que vous devez modifier :

/* navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.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;
}
.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;
}
/* Mobile version */
.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;
    }
}

Exemples de barres de navigation colorées personnalisées

Voici quatre exemples de barre de navigation colorée personnalisée :

Et le code SCSS :

$bgDefault   : #e74c3c;
$bgHighlight : #c0392b;
$colDefault  : #ecf0f1;
$colHighlight: #ffbbbc;
.navbar-default {
  background-color: $bgDefault;
  border-color: $bgHighlight;
  .navbar-brand {
    color: $colDefault;
    &:hover, &:focus {
      color: $colHighlight; }}
  .navbar-text {
    color: $colDefault; }
  .navbar-nav {
    > li {
      > a {
        color: $colDefault;
        &:hover,  &:focus {
          color: $colHighlight; }}}
    > .active {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}
    > .open {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
  .navbar-toggle {
    border-color: $bgHighlight;
    &:hover, &:focus {
      background-color: $bgHighlight; }
    .icon-bar {
      background-color: $colDefault; }}
  .navbar-collapse,
  .navbar-form {
    border-color: $colDefault; }
  .navbar-link {
    color: $colDefault;
    &:hover {
      color: $colHighlight; }}}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu {
    > li > a {
      color: $colDefault;
      &:hover, &:focus {
        color: $colHighlight; }}
    > .active {
      > a, > a:hover, > a:focus, {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
}

Et enfin, un petit cadeau

Je viens de réaliser un script qui vous permettra de générer votre thème : TWBSColor - Générez votre propre barre navale Bootstrap

[Mise à jour] : TWBSColor génère maintenant SCSS/SASS/ [Moins](https://en.wikipedia.org/wiki/Less%28stylesheetlanguage%29) /CSS code.
[Mise à jour] : A partir de maintenant, vous pouvez utiliser Less comme langue par défaut fournie par TWBSColor.
[Mise à jour] : TWBSColor prend désormais en charge la colorisation des menus déroulants
[Mise à jour] : TWBSColor permet désormais de choisir sa version (support de Bootstrap 4 ajouté)

Answer 2

Bootstrap 5 beta (mise à jour 2021)

Par défaut, la barre de navigation est transparente dans Bootstrap 5. Peu de choses ont changé depuis Bootstrap 4 pour la modification de la couleur d'arrière-plan de la Navbar, de la couleur du texte, des liens, du dropdown et des styles de survol .

/* change the background color */
.navbar-custom {
    background-color: #4433cc;
}

/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: #ffcc00;
}

/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: #ffbb00;
}

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: pink;
}

/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu {
    background-color: #ddaa11;
}

/* dropdown item text color */
.navbar-custom .navbar-nav .dropdown-item {
    color: #000000;
}

/* dropdown item hover or focus */
.navbar-custom .navbar-nav .dropdown-item:hover,
.navbar-custom .navbar-nav .dropdown-item:focus {
    color: #eeeeee;
    background-color: red;
}

Démonstration de la couleur de la barre navale personnalisée de Bootstrap 5

---

Bootstrap 4.3 (mise à jour 2020)

La modification de la couleur de la barre de navigation est différente (et un peu plus facile) en Bootstrap 4 . Vous pouvez créer une classe de barre de navigation personnalisée, puis la référencer pour modifier la barre de navigation sans avoir d'impact sur les autres navs de Bootstrap .

<nav class="navbar navbar-custom">...</nav>

Bootstrap 4.3+.

Le CSS nécessaire pour modifier la barre de navigation est beaucoup moins important dans Bootstrap 4...

.navbar-custom {
    background-color: #ff5500;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}

Démonstration de la barre de navigation personnalisée Bootstrap 4

Modifier le lien actif/couvert arrière-plan couleur fonctionne également avec la même CSS, mais vous devez ajuster le padding si vous voulez que la couleur du bg remplisse toute la hauteur du lien...

py-0 pour supprimer le rembourrage vertical de toute la barre de navigation...

<nav class="navbar navbar-expand-sm navbar-custom py-0">..</nav>

/* change the link color and padding  */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
    padding: .75rem 1rem;
}

/* change the color and background color of active links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
    background-color: #333;
}

Démonstration de Bootstrap 4 sur le changement de lien et de couleur d'arrière-plan

Voir aussi : Bootstrap 4 : changer la couleur du Toggler Hamburger

---

**Bootstrap 3**

<nav class="navbar navbar-custom">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">...
    </button>
    <a class="navbar-brand" href="#">Title</a>
  </div>
   ...
</nav>

.navbar-custom {
    background-color:#229922;
    color:#ffffff;
    border-radius:0;
}

.navbar-custom .navbar-nav > li > a {
    color:#fff;
}

.navbar-custom .navbar-nav > .active > a {
    color: #ffffff;
    background-color:transparent;
}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav > .open >a {
    text-decoration: none;
    background-color: #33aa33;
}

.navbar-custom .navbar-brand {
    color:#eeeeee;
}
.navbar-custom .navbar-toggle {
    background-color:#eeeeee;
}
.navbar-custom .icon-bar {
    background-color:#33aa33;
}

Démonstration de la barre de navigation personnalisée sur Bootply

---

Si la barre de navigation comporte des listes déroulantes, ajoutez les éléments suivants pour modifier la ou les couleurs des listes déroulantes :

/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu  { 
  background-color: #33aa33;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a  { 
  color: #fff;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a:hover,.navbar-custom .navbar-nav .dropdown-menu>li>a:focus  { 
  color: #33aa33;
}

Démo avec Dropdown

---

Si vous voulez changer les couleurs du thème tous ensemble (au-delà de la barre de navigation), voir cette réponse

Answer 3

Utiliser moins

Vous pouvez également envisager de compiler votre propre version. Essayez http://getbootstrap.com/customize/ (qui comporte une section distincte pour les paramètres des barres de navigation (barre de navigation par défaut et barre de navigation inversée)) ou téléchargez votre propre copie à partir du site suivant https://github.com/twbs/bootstrap .

Vous trouverez les paramètres de la barre de navigation dans variables.less . navbar.less est utilisé pour compiler la barre de navigation (dépend de variables.less et mixins.less ).

Copiez la section "navbar-default" et définissez vos propres paramètres de couleur. Modifier les variables dans variables.less sera le moyen le plus simple (changer la barre de navigation par défaut ou inverse ne sera pas un problème car vous n'avez qu'une seule barre de navigation par page).

Dans la plupart des cas, vous ne changerez pas tous les paramètres :

// Navbar
// -------------------------

// Basics of a navbar
@navbar-height:                    50px;
@navbar-margin-bottom:             @line-height-computed;
@navbar-default-color:             #777;
@navbar-default-bg:                #f8f8f8;
@navbar-default-border:            darken(@navbar-default-bg, 6.5%);
@navbar-border-radius:             @border-radius-base;
@navbar-padding-horizontal:        floor(@grid-gutter-width / 2);
@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);

// Navbar links
@navbar-default-link-color:                #777;
@navbar-default-link-hover-color:          #333;
@navbar-default-link-hover-bg:             transparent;
@navbar-default-link-active-color:         #555;
@navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color:       #ccc;
@navbar-default-link-disabled-bg:          transparent;

// Navbar brand label
@navbar-default-brand-color:               @navbar-default-link-color;
@navbar-default-brand-hover-color:         darken(@navbar-default-link-color, 10%);
@navbar-default-brand-hover-bg:            transparent;

// Navbar toggle
@navbar-default-toggle-hover-bg:           #ddd;
@navbar-default-toggle-icon-bar-bg:        #ccc;
@navbar-default-toggle-border-color:       #ddd;

Vous pouvez également essayer http://twitterbootstrap3navbars.w3masters.nl/ . Cet outil génère le code CSS de votre barre de navigation personnalisée. En option, vous pouvez également ajouter des couleurs dégradées et des bordures à la barre de navigation.

Answer 4

Essayez ceci aussi. Ça a marché pour moi.

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: #00a950;
  color: #000000;
}

Answer 5

S'il s'agit uniquement de modifier la couleur de la barre de navigation, je vous suggère d'utiliser.. : Bootstrap Magic . Vous pouvez modifier les valeurs de différentes propriétés de la barre de navigation et voir un aperçu.

Téléchargez le résultat sous la forme d'une feuille de style CSS personnalisée ou d'un fichier de variables Less. Vous pouvez modifier les valeurs à l'aide de champs de saisie et de sélecteurs de couleurs.