I don't know why navbar text color is not changing for my code?

Question

I am trying to make the navbar using bootstrap and CSS. I tried many ways but to change the navbar text color, but none of any way is working except inline CSS. Anyone can help me in resolving my issue.

<!DOCType html>
<html>

<head>
  <title>My Second Class Assignment</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-white">

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="navbar-brand" href="#">
              <img src="image/logo.png" class="d-inline-block align-top" alt="Learn Xpert">
            </a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">HOME <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">PAGES</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-blue" href="#">BLOG</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-blue" href="#">CONTACT</a>
          </li>
        </ul>
      </div>
  </div>
  </nav>

  <!---JavaScript--->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="js/bootstrap.min.js" rel="stylesheet"></script>
</body>

</html>

CSS File

/* CSS */ 
a{
    color:#ff6347;
    font-size: 20px;
}

Inspect the element in browser and find out which rule is getting applied to the element/nav. it should be some bootstrap rule. copy that rule and paste in your style sheet and apply style. — Pons Purushothaman, Jul 30 '19 at 10:03

score 2 · Answer 1 · answered Jul 30 '19 at 10:04

2

bootstrap styles navlinks with

.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.5);
}

So to override, you would need the same level of specificity (or higher) included after the original style. A bare anchor style is not specific enough to change the style of your links which is why your colour does not change

More information about css specificity

answered Jul 30 '19 at 10:04

Pete

57,112
28
117
166

1

Thanks. To everyone. It's working. :) – ABDUL KHALIQ Jul 30 '19 at 11:19

score 1 · Answer 2 · answered Jul 30 '19 at 10:02

1

CSS selectors have specificity. You should avoid using the !important directive, because it makes your code difficult to maintain and scale.

Instead, you need to add equivalent or more specificity to your selector:

.navbar-nav .nav-item a.nav-link {
  color: #ff6347;
  font-size: 20px;
}

answered Jul 30 '19 at 10:02

BenM

52,573
26
113
168

Thanks. To everyone. It's working. :) – ABDUL KHALIQ Jul 30 '19 at 11:19

score 1 · Answer 3 · answered Jul 30 '19 at 10:02

1

Target this way

.navbar-light .navbar-nav .nav-link {
    color:#ff6347;
    font-size: 20px;;
}

https://jsfiddle.net/lalji1051/xda1sur5/3/

answered Jul 30 '19 at 10:02

Lalji Tadhani

14,041
3
23
40

Thanks. To everyone. It's working. :) – ABDUL KHALIQ Jul 30 '19 at 11:19

I don't know why navbar text color is not changing for my code?

3 Answers3