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>

score 30 · Accepted Answer · answered Feb 11 '18 at 19:48

30

set the color on the a element inside the li.

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

answered Feb 11 '18 at 19:48

ztadic91

2,774
1
15
21

Thanks a lot... I didn't realize that would work with link_to! – Mason SB Feb 11 '18 at 19:54
glad I could help. If it did resolve your question, don't forget to mark the question as answered. thanks – ztadic91 Feb 11 '18 at 19:57
5

Using !important is a bad practice. More later or specific rule. – Ronny Sherer Nov 20 '19 at 14:15

score 20 · Answer 2 · answered Feb 11 '18 at 20:10

20

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

answered Feb 11 '18 at 20:10

WebDevBooster

14,674
9
66
70

why repeating exactly the same asnwer the same day : https://stackoverflow.com/a/48730183/8620333 ? – Temani Afif May 08 '18 at 00:09
6

@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. – WebDevBooster May 08 '18 at 03:44

Bootstrap Change Navbar Link Colors

2 Answers2

Linked