Change navbar text color Bootstrap

Question

I currently have this piece of html which represents the relevant part of my navbar:

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

And I have this piece of css which I was hoping to use to change the text color of the navbar:

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

The only problem is that the text color remains unchanged. I also saw that a very similar question went unsolved. I bet whoever can solve this one can solve the other too.

Leban

You will probably have to target the li as well. Have you tried .nav.navbar-nav.navbar-right li a ? Or you could style each individual a tag with the font-color by giving it a class. – Stickleback

Doing the " a" worked. If you post this as an answer, I will award you the question. – Leban

Answer 1

Make it the following:

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

The above will target the specific links, which is what you want, versus styling the entire list blue, which is what you were initially doing. Here is a JsFiddle.

The other way would be creating another class and implementing it like 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;
}

Also demonstrated in this JsFiddle

Stickleback

Is there any way to make the toggle button blue too? – Aric

This no longer works in bootstrap 5.x – Lump

Answer 2

As of bootstrap 4, the answer is to simply set navbar-dark in the nav element, which will set the text and links to a light theme .

<nav class="navbar navbar-dark">

Adolescence

I don't know why this is not rated higher. – Washerman

Answer 3

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

 /* Worked for me. Bootstrap v4.3.1 */

Layette

Answer 4

For changing the text color in navbar you can use inline css as;

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

Morion

For some reason none of the other solutions worked for me. Only this one did. Thanks – Coffer

Answer 5

The thread you linked to does answer the question for you. You need to target the a elements themselves. E.g.

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

If that doesn't work, it just needs to be more specific. E.g.

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

Heliochrome

Answer 6

In fact, we can simply use the standard bootstrap text colors, instead of hacking the CSS formats.

Standard Color examples: text-primary, text-secondary, text-success, text-danger, text-warning, text-info

In the Navbar code sample bellow, the text Homepage would be in the orange color (text-warning).

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

In the Navbar menu item sample bellow, the text Menu Item would be in the blue color (text-primary).

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

Fitton

Answer 7

Just Add navbar-dark class in the <nav> tag like this

<nav class="navbar navbar-inverse navbar-dark">

Threaten

Answer 8

Try this

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

If it doesn't work try this

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

Reeves

Answer 9

this code will work ,

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

paste in your css and run if you have a element below

define it as .navbar-item class

eg .

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

OR

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

Dextrose

Answer 10

Try this in your css:

#ntext{
 color: #000000;
  }

Then the following in all your navigation bar list codes:

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

Lynnell

Answer 11

If you need to change the background colour of the navbar, you can do the following:

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

And to change the text:

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

Hoeve

OP has asked for the text color of the link, not the background color – Maintop

Answer 12

Thanks WChoward for your answer. I expanded:

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

Aric

Answer 13

Add some inline css to the anchor tag

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

This should add the color blue to the anchor tag text.

Krefetz

Answer 14

Simple just do

li a {
    color: blue;
}

Summerville

Welcome to StackOverflow. While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. Furthermore please explain why your answer is preferable to the others. – Marvamarve

Answer 15

In Bootstrap 5.2.3 the following works:

a.nav-link{
  color: blue;
}

<ul class="navbar-nav mb-2 mb-lg-0 ms-auto">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About Us</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contact Us</a>
  </li>
</ul>

Jacquenette

Answer 16

Inside your class-wp-bootstrap-navwalker.php file add style or class

if ( false !== strpos( $args->items_wrap, 'itemscope' ) && false === $this->has_schema ) {
  $this->has_schema  = true;
  $args->link_before = '<span style="color:black" itemprop="name">' . $args->link_before;
  $args->link_after .= '</span>';
}

Oarfish

Answer 17

The syntax is :

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

Soyuz