Bootstrap Navbar Link Color Won't Change

Bootstrap navbar link color won't change

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>

Bootstrap. Can't change navbar link color. Even with ID

Change:

.navbar-default .navbar-nav > li > a {
color:red;
}

to this:

.navbar .navbar-nav > li > a {
color:red;
}

Bootstrap Change Navbar Link Colors

set the color on the a element inside the li.

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

Why won't the color of my navbar links change

You need to use .textstyle16 a or .textstyle16 a:link as a selector. The links are child elements of the .textstyle16 elements, they don't have that class themselves, and there is a color declaration for a tags in the browsers default styles which applies if you don't use these selectors.

Color won't change on Bootstrap Navbar

you could something like this

  <ul class="nav navbar-nav">
    <li class="active"><a class= "colorMe" href="aboutUs.html">About Us</a></li>
    <li><a href="members-login.html" class="colorMe">Members</a></li>
    <li><a href= "lifeguard-login.html" class= "colorMe">Lifeguards</a></li>
  </ul>

 .colorMe {
    color: darkgreen;
  }

note: if this isn't the right solution you might have to provide more code example
for us to see where is .colorMe called in your HTML

Text color of nav bar items not reflecting custom CSS

In your CSS code, try changing your selector .nav-link to .navbar-light .navbar-nav .nav-link, as follows:

.navbar-light .navbar-nav .nav-link{
    font-size: 24px;
    color: #FFFFFF;
}

In fact, for applying style to this element, Bootstrap use the selector .navbar-light .navbar-nav .nav-link which is more specific than yours. In CSS, the most specific selector will be applied.

More about CSS Specificity : https://www.w3schools.com/css/css_specificity.asp

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stiks</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
    /*Navigation bar*/
.menu-bar{
    background-color: #101010;
}

*{
    font-family: 'Poppins', sans-serif;
}

.navbar-light .navbar-nav .nav-link{
    font-size: 24px;
    color: #FFFFFF;
}
    </style>
</head>

<body>
            <div class="header">
              <div class="menu-bar">
               <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
                 <div class="container-fluid">
                    <a class="navbar-brand" href="#"><img src="../assets/Icon.svg" width="32" height="auto"> </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                   </button>
                    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                      <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                         <a class="nav-link active" aria-current="page" href="#">Home</a>
                       </li>
                       <li class="nav-item">
                         <a class="nav-link" href="#">Features</a>
                       </li>
                       <li class="nav-item">
                          <a class="nav-link" href="#">Pricing</a>
                       </li>
                        <li class="nav-item">
                          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                        </li>
                     </ul>
                   </div>
                  </div>
                </nav>
              </div>
            </div>

    <main>

    </main>

    <footer>

    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

</body>
</html>

---

Related Topics