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.

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. — BuddhistBeast, Jun 25 '14 at 23:16
Doing the " a" worked. If you post this as an answer, I will award you the question. — Quinn McHugh, Jun 25 '14 at 23:17

BuddhistBeast · Accepted Answer · 2014-06-25T23:25:05.817

43

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

edited Jun 25 '14 at 23:25

answered Jun 25 '14 at 23:14

BuddhistBeast

2,652
2
21
29

Is there any way to make the toggle button blue too? – Sam Feb 25 '20 at 23:57
This no longer works in bootstrap 5.x – Matt Dec 31 '21 at 23:02

Leon · Answer 2 · 2018-10-14T20:37:27.013

21

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

edited Oct 14 '18 at 20:37

answered May 26 '18 at 13:22

Leon

1,851
3
21
44

5

I don't know why this is not rated higher. – jon5477 Aug 22 '18 at 17:56

dynamiclynk · Answer 3 · 2019-03-19T00:06:45.360

15

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

Worked for me. Bootstrap v4.3.1

edited Mar 19 '19 at 00:06

answered Mar 19 '19 at 00:01

dynamiclynk

2,275
27
31

score 9 · Answer 4 · answered Jul 30 '19 at 09:34

9

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

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

answered Jul 30 '19 at 09:34

ABDUL KHALIQ

126
2
6

For some reason none of the other solutions worked for me. Only this one did. Thanks – DineshKumar Jun 30 '20 at 07:28

score 2 · Answer 5 · answered Jun 25 '14 at 23:17

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

Happy · Answer 6 · 2019-06-08T05:55:26.590

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>

mahmoud hamza · Answer 7 · 2022-05-26T05:20:34.087

2

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

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

edited May 26 '22 at 05:20

answered May 26 '22 at 05:17

mahmoud hamza

21
2

score 1 · Answer 8 · answered Jun 25 '14 at 23:17

1

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

answered Jun 25 '14 at 23:17

Aditya Ponkshe

3,840
4
39
58

kushal · Answer 9 · 2019-02-16T08:01:56.183

1

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>

edited Feb 16 '19 at 08:01

answered Feb 16 '19 at 07:55

kushal

35
6

score 0 · Answer 10 · answered Aug 03 '16 at 08:55

0

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>

answered Aug 03 '16 at 08:55

Shakela Tamuti

1
2

score 0 · Answer 11 · answered Nov 02 '18 at 12:32

0

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

answered Nov 02 '18 at 12:32

Marty

1
2

OP has asked for the text color of the link, not the background color – Prashant Pokhriyal Dec 13 '18 at 08:29

score 0 · Answer 12 · answered Feb 26 '20 at 00:04

0

Thanks WChoward for your answer. I expanded:

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

answered Feb 26 '20 at 00:04

Sam

4,766
11
50
76

score 0 · Answer 13 · answered Dec 30 '20 at 15:13

0

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.

answered Dec 30 '20 at 15:13

Safeer Abbas

393
4
9

score 0 · Answer 14 · edited Jul 16 '21 at 00:06

0

Simple just do

li a {
    color: blue;
}

edited Jul 16 '21 at 00:06

Sven Eberth

3,057
12
24
29

answered Jul 15 '21 at 18:36

user16457727

1

1

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. – Sven Eberth Jul 16 '21 at 00:12

score 0 · Answer 15 · edited Feb 17 '23 at 12:08

0

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>

edited Feb 17 '23 at 12:08

Konstantinos Gallis

956
6
11

answered Feb 13 '23 at 21:24

Royalwisdom

1
1

score -2 · Answer 16 · edited Aug 21 '17 at 15:15

-2

The syntax is :

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

edited Aug 21 '17 at 15:15

Cody Gray - on strike

239,200
50
490
574

answered Aug 21 '17 at 14:55

user8495864

1

Change navbar text color Bootstrap

16 Answers16

Linked

Related