Boostrap NavBar how to change text color on Navbar-Brand class?

Question

I have tried so many different options for the class to change the text color on the navbar and specifically the navbar-brand item. My .navbar-brand color:purple; css class is not functioning. Can you please help me figure out what I need to put as the tag so that I can change the color?

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Nicole Santarsiero</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav navbar-right">
            <li class="nav-item">
                <a class="nav-link" href="./index.html">About &nbsp;</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="./portfolio.html">Portfolio</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="./contact.html">&nbsp;&nbsp;Contact</a>
            </li>
            </ul>
        </div>
        </nav>

<style>

    .navbar-light {
        background-color: gray;
    }

    .navbar-brand {
    color: purple;
    } 

</style>

it seems to work just fine for me! unless you mean something else check this [jsfiddle](https://jsfiddle.net/adamra/49Lh1wy8/2/) — , Feb 10 '18 at 03:42

Carol Skelly · Answer 1 · 2018-02-10T08:36:17.873

4

Learn about CSS Specificity. This tells the browser which CSS takes precedence when applying style to elements. You need to use a CSS selector that is the same as, or more specific than the Bootstrap 4 .navbar-brand selector which is:

.navbar-light .navbar-brand {
    color: rgba(0,0,0,.9);
}

So, to override this you'd use:

.navbar-light .navbar-brand {
    color: purple;
}

https://www.codeply.com/go/D0dUL1I1rW

Also see: Bootstrap 4 navbar color

edited Feb 10 '18 at 08:36

answered Feb 10 '18 at 07:59

Carol Skelly

351,302
90
710
624

This is a great answer. It’s better than all the official documentation. Thanks! – OakNinja Sep 02 '20 at 21:39

score 0 · Answer 2 · answered Feb 10 '18 at 03:53

0

Plain CSS:

nav a { color: fuchsia; }

answered Feb 10 '18 at 03:53

Jan Kyu Peblik

1,435
14
20

score 0 · Answer 3 · edited Feb 11 '18 at 09:46

0

Plain css

nav a .navbar-brand { color: fuchsia; }
or
.navbar-light .navbar-brand {
  color: fuchsia;
}

edited Feb 11 '18 at 09:46

Martijn Pieters

1,048,767
296
4,058
3,343

answered Feb 10 '18 at 04:09

narayan maity

322
3
13

Hilarious. 4321 – Jan Kyu Peblik Feb 10 '18 at 05:13

score 0 · Answer 4 · answered Dec 20 '20 at 07:21

0

worked for me in bootstrap 4.5

.navbar-brand{
color: blue !important;
}

answered Dec 20 '20 at 07:21

confused_

1,133
8
10

Boostrap NavBar how to change text color on Navbar-Brand class?

4 Answers4

Plain css