How do I change text color inside a nav bar?

Question

I've tried to use one of the recommended bootstrap 4 navbar styles. I pasted the code inside my project and all worked well. The only problem is that I've changed the background color from dark to white. Because of that text inside the navbar went invisible. I was trying many ways on how to change the text color to black so you can see the text but it didn't work and I can't figure out how do I change the color of the text from white to black.

I've tried adding the text-black class inside one of the navbar classes which didn't work as well.

Thanks for any help.

<!-- Navigation -->
<section id="navigation">
    <nav class="navbar navbar-expand-lg navbar-dark bg-white static-top text-black">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="images/logo_5_150x60.png" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home
                            <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</section>

K go-ahead but primarily answer the question, please. Thanks. — , Aug 06 '19 at 15:53
Change the `navbar-dark` to `navbar-light` if you're using a white background. https://getbootstrap.com/docs/4.3/components/navbar/#color-schemes — jmoerdyk, Aug 06 '19 at 15:54
Guys the question is answered by Miroslav Glamuzina. Thanks to everyone for help. — , Aug 06 '19 at 15:55

score 2 · Accepted Answer · answered Aug 06 '19 at 15:59

The navbar-dark class on your <nav> element is the one setting the text color. Change the navbar-dark to navbar-light when using light background colors.

Documentation: https://getbootstrap.com/docs/4.3/components/navbar/#color-schemes

<!-- Navigation -->
<section id="navigation">
    <nav class="navbar navbar-expand-lg navbar-light bg-white static-top text-black">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="images/logo_5_150x60.png" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home
                            <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</section>

score 0 · Answer 2 · answered Aug 06 '19 at 15:53

Just add some css to #navigation * and set the color using color.

#navigation * {
  color: red;
}

<!-- Navigation -->
<section id="navigation">
  <nav class="navbar navbar-expand-lg navbar-dark bg-white static-top text-black">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="images/logo_5_150x60.png" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home
                            <span class="sr-only">(current)</span>
                        </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</section>

Hope this helps

How do I change text color inside a nav bar?

2 Answers2