Changing color of Nav Bar on Bootstrap

Question

I want to change the font color of the Nav Bar to white, but I'm having trouble identifying the correct CSS class to call out to do so. 'Navbar' on the top left is already white because of Bootstraps' CSS, but I want to change 'Contact', 'Portfolio' and 'About' to white also.

HTML

    <nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</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">
    <li class="nav-item active">
      <a class="nav-link" href="#"> Contact <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Portfolio</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul>

CSS

    .nav-item{
        color:white
    }

Nikhil S · Accepted Answer · 2020-04-12T17:11:16.117

2

use:

<nav class="navbar navbar-light bg-primary">

and add

text-white

edited Apr 12 '20 at 17:11

answered Apr 12 '20 at 17:06

Nikhil S

3,786
4
18
32

This doesn't change the text to white, as requested. – terrymorse Apr 12 '20 at 17:09
check this!!!!!! – Nikhil S Apr 12 '20 at 17:11
check this for refernece https://stackoverflow.com/questions/61169561/mobile-navbar-bootstrap-with-left-bar-icon-and-right-aligned-icons/61174293#61174293 – Nikhil S Apr 12 '20 at 17:11
@terrymorse i guess you did asked for it neither did you check my answer commenting negative about it – Nikhil S Apr 12 '20 at 17:12
"navbar-light" sets text color to black, not white. Adding "text-white" to every link will work, but it is a brute-force technique. No different than setting `style="color: white` on every link. – terrymorse Apr 12 '20 at 18:46
@terrymorse **IT WILL WORK** – Nikhil S Apr 12 '20 at 19:02
Yes it will work. But it requires markup on every link. Rather inefficient. – terrymorse Apr 12 '20 at 23:41

score 0 · Answer 2 · answered Apr 12 '20 at 16:52

0

In your main "nav class" you have select "bg-primary" try this

answered Apr 12 '20 at 16:52

Shqipdon SELMANI

1

terrymorse · Answer 3 · 2020-04-15T15:08:17.033

For overall text color in a navbar, there are two classes: navbar-dark and navbar-light.

navbar-dark has a base color of white. navbar-light has a base color of black, with a 90% opacity.

Navbar links have reduced opacity, so they will neither be completely black or completely white.

To force all link colors to white, you can target the .nav-link rule, like this:

    .navbar-dark .navbar-nav .nav-link {
      color: white;
    }

A working example:

<!-- navbar-dark with link text forced to white -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<!-- insert this style *after* linking Bootstrap -->
<style>
  .navbar-dark .navbar-nav .nav-link {
    color: white;
  }
</style>

<nav class="navbar navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler mr-5" 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">
      <li class="nav-item active">
        <a class="nav-link" href="#"> Contact <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>

Changing color of Nav Bar on Bootstrap

3 Answers3