Bootstrap navbar link color won’t change

by

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

More Related Contents:

  1. Bootstrap row with columns of different height
  2. Bootstrap 4: Multilevel Dropdown Inside Navigation
  3. Animate/Shrink NavBar on scroll using Bootstrap
  4. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  5. How to center nav-items in Bootstrap? [duplicate]
  6. Create a responsive navbar sidebar “drawer” in Bootstrap?
  7. Bootstrap 4 Cards of same height in columns
  8. How to make Bootstrap 4 cards the same height in card-columns?
  9. Bootstrap – align button to the bottom of card
  10. Bootstrap 4 – Sticky footer – Dynamic footer height
  11. Bootstrap 4 – Responsive cards in card-columns
  12. Align the form to the center in Bootstrap 4 [duplicate]
  13. Empty vertical space between columns in Bootstrap 4
  14. Bootstrap navbar: nothing is displayed on smaller devices
  15. Why aren’t my bootstrap 4 columns the same height?
  16. CSS float-right not working in Bootstrap 4 Navbar [duplicate]
  17. How to make Bootstrap cards the same height in card-columns?
  18. How to place a div over a image? [closed]
  19. Setting columns in bootstrap grid
  20. Bootstrap height
  21. Which way to implement this picture in HTML CSS code and bootstrap
  22. Table fixed header and scrollable body
  23. How do I change Bootstrap 3 column order on mobile layout?
  24. Bootstrap 3 two columns full height
  25. 7 equal columns in bootstrap
  26. Bootstrap print CSS removes background color
  27. Responsive image align center bootstrap 3
  28. Bootstrap 3 – show collapsed navigation for all screen sizes
  29. How to make bootstrap carousel image responsive?
  30. Bootstrap 5 layout for different sizes cards – like Pinterest

Leave a Comment