web-dev-qa-db-fra.com

Changer la couleur du texte de la barre de navigation

J'ai actuellement ce morceau de HTML qui représente la partie pertinente de ma barre de navigation:

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> About</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-briefcase"></span> Portfolio</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> R&eacute;sum&eacute;</a></li>
        </ul>
    </div>
</nav>

Et j'ai ce css que j'espérais utiliser pour changer la couleur du texte de la barre de navigation:

.nav.navbar-nav.navbar-right {
    color: blue;
}

Le seul problème est que la couleur du texte reste inchangée . J'ai également vu qu'une question très similaire est restée sans solution. Je parie que celui qui peut résoudre celui-ci peut résoudre l'autre aussi.

htmlcsstwitter-bootstrapcolors
14
Quinn McHugh

Faites-en ce qui suit:

.nav.navbar-nav.navbar-right li a {
    color: blue;
}

Ce qui précède ciblera les liens spécifiques (ce que vous souhaitez), par opposition au style de la liste entière bleue (ce que vous faisiez initialement). Voici un JsFiddle .

L’autre solution consisterait à créer une autre classe et à la mettre en œuvre de la manière suivante:

HTML

<li><a href="#" class="color-me"><span class="glyphicon glyphicon-list-alt"></span> R&eacute;sum&eacute;</a></li>

CSS

.color-me{
    color:blue;
}

Également démontré dans ceci JsFiddle

29
BuddhistBeast

À partir du bootstrap 4, la solution consiste simplement à définir navbar-dark dans l'élément nav, ce qui définira le texte et les liens vers un thème clair.

<nav class="navbar navbar-dark">
5
Leon

Le fil que vous avez lié répond à la question pour vous. Vous devez cibler les éléments a eux-mêmes. Par exemple. 

.nav.navbar-nav.navbar-right a {
    color: blue;
}

Si cela ne fonctionne pas, il faut juste être plus précis. Par exemple.

.nav.navbar-nav.navbar-right li a {
    color: blue;
}
2
ralph.m

ce code fonctionnera,

.navbar .navbar-nav > li .navbar-item ,
.navbar .navbar-brand{
                       color: red;
                      }

collez dans votre css et lancez si vous avez un élément en dessous 

  • définir comme classe .navbar-item

    par exemple .

    <li>@Html.ActionLink("Login", "Login", "Home", new { area = "" },
 new { @class = "navbar-item" })</li>

    OU 

    <li> <button class="navbar-item">hi</button></li>
    • 1
    kushal

    Essaye ça 

    .nav.navbar-nav.navbar-right li a span{
    color: blue;
}

    Si cela ne fonctionne pas, essayez ceci

    .nav.navbar-nav.navbar-right li a {
    color: blue;
}
    1
    Aditya Ponkshe

    Essayez ceci dans votre css:

    #ntext{
 color: #000000;
  }

    Puis ce qui suit dans tous vos codes de liste de barres de navigation:

    <li><a href="#" id="ntext"><span class="glyphicon glyphicon-user"></span> About</a></li>
    0
    Shakela Tamuti

    Si vous devez modifier la couleur d'arrière-plan de la barre de navigation, vous pouvez procéder comme suit:

    <nav class="navbar navbar-expand-lg navbar-light" style="background-color=#e3f2fd">

    Et pour changer le texte:

    <a class="nav-link" href="#" style="color:#ccc">
    0
    Martin Minnie