Bootstrap navbar link color won't change

Question

I need to change my navbar links to white and space them out across the navbar. I have written code for this but I can't seem to figure out why/where it keeps getting overridden. The background of the navbar is an image and the links seem to change to white without the image in there, so is there a way to fix that and keep the image in the background?

Can anyone help me understand what I'm doing wrong?

.navbar {
  background-image: url("images/navbarbgnew.png");
  background-size: cover;
  margin: -30px 0 15px 0;
}

.navbar ul {
  display: flex;
  justify-content: space-around;
}

.navbar ul li a {
  color: #FFF;
  font-family: "Helvetica," sans-serif;
  font-weight: 600;
  font-size: 14px;
}

<nav class="navbar navbar-expand-md navbar-light bg-light mb-3">
  <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="nav navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          BOOKS
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Branding Sutra</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          LEARNING LAB
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Workshops</a>
          <a class="dropdown-item" href="#">Classes</a>
          <a class="dropdown-item" href="#">Audio Downloads</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">SERVICES</a>
      </li>
    </ul>
  </div>
</nav>

@WebDevBooster Nothing. "One or more of the answers is exemplary and worthy of an additional bounty." I ran into the same problem as OP today and your answer fixed it. Have some rep. Simply takes 24h before I can award it. — Mast, May 07 '18 at 16:23
This is a duplicate https://stackoverflow.com/questions/48735679/bootstrap-change-navbar-link-colors — Carol Skelly, May 07 '18 at 19:18
@ZimSystem a duplicate and answered by the same person the same day ! how this one avoided your Boostrap hammer ?:p — Temani Afif, May 08 '18 at 00:06

WebDevBooster · Accepted Answer · 2018-02-11T09:49:59.613

Can anyone help me understand what I'm doing wrong?

The specificity of your custom css rule must either match or exceed the specificity of the corresponding Bootstrap rule.

So, in this particular case you need a rule that looks like this:

.navbar-light .navbar-nav .nav-link {
    color: red;
}

Click "run code snippet" button below and expand to full page to verify that it works:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
<style>
.navbar-light .navbar-nav .nav-link {
    color: red;
}
</style>

<nav class="navbar navbar-expand-md navbar-light bg-light mb-3">
    <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="nav navbar-nav">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    BOOKS
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Branding Sutra</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    LEARNING LAB
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Workshops</a>
                    <a class="dropdown-item" href="#">Classes</a>
                    <a class="dropdown-item" href="#">Audio Downloads</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">SERVICES</a>
            </li>
        </ul>
    </div>
</nav>

More info about CSS specificity:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

And: CSS Specificity Calculator

thank you! it was partly answered. it changed the links to white, but they're still bunched on the left side of the navbar. How do I space them out across the entire width? I thought display:flex and justify-content: space-around; would do that? — brihep, Feb 17 '18 at 18:13
@brihep if you're using bootstrap, just add the class `ms-auto` to every single `

score 0 · Answer 2 · answered Feb 25 '22 at 09:25

0

just remove the class= navbar-light;

answered Feb 25 '22 at 09:25

Om Soni

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 25 '22 at 10:08
This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/31158145) – Halo Mar 01 '22 at 15:34

Bootstrap navbar link color won't change

2 Answers2

Linked

Related