Bootstrap Change Navbar Link Colors

Question

I know this topic has been beaten to death, but what I have read isn't working. I'm simply trying to change the links in my bootstrap navbar to the color white. I know I have the CSS on it because I can change the font-size, but not the color.

nav .navbar-nav li{
  color: white !important;
  font-size: 25px;
  }

<nav class="navbar navbar-expand-lg navbar-light fixed-top sticky-top">
  <%= link_to root_path, class: 'navbar-brand' do %>
            <span class="fa fa-home" aria-hidden="true"> Bartlett Containers LLC</span>  <% end %>


  <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">
      <li class="nav-item">
        <%=link_to 'Pricing', pricing_path, class: 'nav-link' %>
      </li>
      <li class="nav-item">
        <%=link_to 'FAQ', faq_path, class: 'nav-link' %>
      </li>
      <li class="nav-item">
        <%=link_to 'Contact', contact_path, class: 'nav-link' %> 
      </li>

    </ul>
  </div>
</nav>

Solution 1

set the color on the a element inside the li.

nav .navbar-nav li a{
  color: white !important;
  }

Solution 2

The !important flag is meant for quick testing only. Using it as a permanent solution tends to cause problems later and thus should be avoided.

The best practice for overriding css is simply to ensure that the specificity of your custom css rule either matches or exceeds the specificity of the corresponding Bootstrap rule. And of course, the custom css must be loaded after Bootstrap css.

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

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

More info about CSS specificity:

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

And: CSS Specificity Calculator

Comments

[Mason SB]

Thanks a lot... I didn't realize that would work with link_to!

[ztadic91]

glad I could help. If it did resolve your question, don't forget to mark the question as answered. thanks

[Temani Afif]

why repeating exactly the same asnwer the same day : stackoverflow.com/a/48730183/8620333 ?

[WebDevBooster]

@TemaniAfif Maybe because the other answer is not optimal and because people use different keyword combinations when searching and would like to find the right answer when typing that keyword combination.

[Ronny Sherer]

Using !important is a bad practice. More later or specific rule.