web-dev-qa-db-fra.com

bootstrap 3 couleurs de marque de la barre de navigation

J'utilise la barre de navigation bootstrap 3 mais je ne peux pas pour une raison quelconque changer la couleur du texte de la marque ni les triangles déroulants. J'ai essayé quelques choses, mais toujours pas de chance ...

 .navbar .nav > .navbar-brand > a {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color:  #d6d6d6;
 }

.navbar-brand {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color:  #d6d6d6;
}

.navbar-brand a{
     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
     color:  #d6d6d6;
}
csstwitter-bootstraptwitter-bootstrap-3
15
user1949366

Il s'agit d'un problème de spécificité. La déclaration contenue dans le CSS de Bootstrap est plus spécifique que la vôtre. Veuillez rédiger votre déclaration de cette façon:

.navbar-default .navbar-brand {
    color: #d6d6d6;
}

En utilisant simplement .navbar-brand est moins spécifique et donc ignoré. Vous pouvez lire un peu sur la spécificité ici .

35
mingos

Dans le fichier bootstrap.css:

.navbar-default .navbar-brand {
  color: #777777;
}

est l'endroit où la couleur du texte de la marque est définie. J'ai changé cela en color: #ff0000 et il est passé au rouge avec succès. Pour changer la couleur du triangle déroulant, changez les valeurs de couleur ici

.navbar-default .navbar-nav > .dropdown > a .caret {
  border-top-color: #777777;
  border-bottom-color: #777777;
}

Pour différentes couleurs en survol, etc. pour les triangles déroulants:

.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #333333;
  border-bottom-color: #333333;
}

.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: #ff0000;
  border-bottom-color: #ff0000;
}
9
Gloria

Si votre la barre de navigation est noire vous utilisez navbar-inverse, ces solutions ne fonctionneront donc pas.

Donc, dans ce cas, utilisez:

.navbar-inverse .navbar-brand {
    color: #d6d6d6;
}
6
Zacarias Bendeck

Si vos styles ne prennent pas effet, c'est un problème de spécificité. Utilisez l'inspecteur Web dans Chrome ou Safari et il vous dira quels styles sont en vigueur, ainsi que le sélecteur utilisé pour appliquer ces styles.

3
Martin Bean

Si d'autres suggestions ici ne fonctionnent pas pour vous, ajoutez simplement

!important

(Aucun d'eux n'a fonctionné pour moi jusqu'à ce que j'ajoute! Important)

.navbar-brand {
    color: #ffffff  !important;
}
0
Ula