Bootstrap 4 can't change font color in navbar menu

Question

Tried everything and for some reason I can't change colour of font in navbar menu. It's stays black no matter what I do.

            <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a href="index.html"><img src="images/finfab-logo.jpg" alt="Company logo"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                  <a class="nav-link" href="about.html">About<span class="sr-only">(current)</span></a>
                </li>
                </ul>

            </div>
          </nav>

This is how style look now but tried few other options too. I'm out of ideas at this stage.

.jumbotron{
  background-color: #003300;
}

.nav-item{
  font-size: 25px;
  color:#003300;
}

I have answered your question here: https://stackoverflow.com/a/48730183/8270343 — WebDevBooster, Mar 10 '18 at 20:18

score 1 · Answer 1 · answered Mar 10 '18 at 20:03

1

Have you tried to put the !important command on your css styles where you change the font? As you need it to overwrite the styles of bootstrap in that case. So it would be:

color: #003300 !important;

As I cannot comment for 3 missing points I added this as an answer although it should be a comment, because I wanted to help you and I assume my response could be correct in your case. Am sorry for that to every moderator who reads this.

answered Mar 10 '18 at 20:03

primef

199
10

I tried. Didn't work. The only way of changing color is to use contextual colours but that's not what I want. – kalibvb Mar 10 '18 at 20:17
Have you also tried removing the navbar-light class? Maybe that influences the font color. – primef Mar 10 '18 at 20:18
2

The `!important` flag should **never** be used as a permanent solution. It's for testing purposes only. – WebDevBooster Mar 10 '18 at 20:19
1

If used as a last resort, this answer seems useful enough. – jackfrosch Dec 24 '18 at 00:01

Bootstrap 4 can't change font color in navbar menu

1 Answers1