Wijzig de tekstkleur van de navigatiebalk Bootstrap

Ik heb momenteel dit stukje html dat het relevante deel van mijn navigatiebalk vertegenwoordigt:

<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>

En ik heb dit stukje css dat ik hoopte te gebruiken om de tekstkleur van de navigatiebalk te veranderen:

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

Het enige probleem is dat de tekstkleur ongewijzigd blijft.
Ik zag ook dat een zeer vergelijkbare vraagonopgelost bleef . Ik wed dat wie deze kan oplossen, ook de andere kan oplossen.

Antwoord 1, autoriteit 100%

Maak er het volgende van:

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

Het bovenstaande is gericht op de specifieke links, wat is wat u wilt, versus de volledige lijst blauw, wat u aanvankelijk aan het doen was. Hier is een JSFiddle .

Op de andere manier zou een andere klasse creëren en het implementeren zoals SO:

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;
}

Demonstreerden ook in deze JSFiddle

Antwoord 2, Autoriteit 38%

Vanaf Bootstrap 4 is het antwoord om gewoon Navbar-Dark in het NAV-element in te stellen, dat de tekst en koppelingen naar een licht thema zal instellen.

<nav class="navbar navbar-dark">

Antwoord 3, Autoriteit 25%

.nav-link {
color: blue !important;
}

werkte voor mij. Bootstrap v4.3.1

Antwoord 4, Autoriteit 10%

Voor het wijzigen van de tekstkleur in Navbar kunt u inline CSS gebruiken als;

<a style="color: #3c6afc" href="#">

Antwoord 5, Autoriteit 5%

De draad die u hebt gekoppeld om de vraag voor u te beantwoorden. U moet de aelementen zelf targeten. B.v.

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

Als dat niet werkt, moet het gewoon specifieker zijn. B.g

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

Antwoord 6, autoriteit 2%

Probeer dit

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

Als het niet werkt, probeer dit dan

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

Antwoord 7, autoriteit 2%

deze code werkt,

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

plak in je css en voer uit
als je een element hieronder hebt

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

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

<a class="navbar-brand text-warning" href="/" > Homepage </a>

<a class="dropdown-item text-primary" href="/my-link">Menu Item</a>

#ntext{
 color: #000000;
  }

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

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

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

.nav-link, .dropdown-item {
    color: blue !important;
}
.nav-link:hover, .dropdown-item:hover {
    color: darkgreen !important;
}

<li><a style = "color:blue" href="#"><span class="glyphicon glyphicon-user"></span> About</a></li>

li a {
    color: blue;
}

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