CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcss-selectorsnavigation
Julius Parajos
Julius Parajos

Reputation: 1

active nav link not changing

THis is not working, went trough the internet tried another methods in css but the color of the active item on the page when i scroll is always white i want it colored for example yellow

CSS

   <body data-spy="scroll" data-target=".navbar" data-offset="200" id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="img/logo.png"></a>
    <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 ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#about">About Us
              </a>
        </li>
        <li class="nav-item">
          <a id="sss" class="nav-link" href="#team">The Team</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#impressions">Impressions</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
.navbar-expand-lg .navbar-nav > .active > a,
.navbar-expand-lg .navbar-nav > .active > a:hover,
.navbar-expand-lg .navbar-nav > .active > a:focus {
  color: #b6a50c;
}

Upvotes: 0

Views: 326

Answers (1)

Johannes
Johannes

Reputation: 67758

Bootstrap adds the .active class to the link (a), not to its parent, i.e. the list item (li), which is what your selectors would apply to.

Therefore your selector should look like this:

.navbar-expand-lg .navbar-nav > li > a.active {
  color: #b6a50c;
}

Upvotes: 1

Related Questions