1

I have this navbar from bootstrap which is supposed to add active class on nav-item or on anchor element on click, but while inspecting it in browser its not changing states, I don't understand why.

.nav-link {
  color: #FFF;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
}

.nav-link::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: green;
  transition: width .3s;
}

.nav-link:hover::after {
  width: 100%;
}

.navbar-nav>.active>a {
  color: #00cc00;
}
<nav class="navbar navbar-expand-lg navbar-dark " style="background-color: black;">
  <div class="container-fluid">
    <a class="navbar-brand d-lg-none" href="#"><img src="../assets/images/howdy-white.png" style="width:45px; height:45px;" /></a>
    <button class="navbar-toggler shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <a class="navbar-brand d-none d-lg-block" href="#"><img src="../assets/images/howdy-white.png" style="width:45px; height:45px;" /></a>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">about</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">works</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">contacts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">services</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
Sfili_81
  • 2,377
  • 8
  • 27
  • 36
Sinhala
  • 21
  • 3
  • 1
    Does this answer your question? [Bootstrap navbar Active State not working](https://stackoverflow.com/questions/24514717/bootstrap-navbar-active-state-not-working) – Mihai T Jan 29 '21 at 08:27

2 Answers2

1

You need add some javascript event handler while you click that link will do some action.

example if you using jQuery with that navbar structure like you shown

$("ul.navbar-nav li").on("click", function() {
  $("ul.navbar-nav li").removeClass("active");
  $(this).addClass("active")
})

or if you like using vanilla javascript with DOM query SelectorAll

let navbarLink = document.querySelectorAll(".navbar-nav li")

document.addEventListener("click", function(e) {
    for (let x = 0;x < navbarLink.length;x++) {
      navbarLink[x].classList.remove("active")
    }
  
    e.target.closest("li").classList.add("active")
 
})

hope this work on your case.

Angga NIX
  • 31
  • 1
  • this will work obviously, but why this bootstrap didn't work as expected. Like this https://www.geeksforgeeks.org/how-to-change-the-background-color-of-the-active-nav-item/ The navbar should work without using any jquery, once clicked the link the active class should get added. – Sinhala Jan 29 '21 at 09:26
  • Hi, man base on your link. i've read that script. he just using jquery for handling active class. [link](https://drive.google.com/file/d/1cyhXIlAL3MDExkkfJ2gdXQowWg388Hef/view?usp=sharing) – Angga NIX Jan 29 '21 at 09:35
  • even i use that cdn – Sinhala Jan 29 '21 at 09:46
  • if you using cdn from bootstrap official site, that should work. – Angga NIX Jan 29 '21 at 21:12
  • i even tried this jquery bu turn out it just remove the active class but doesn't add it. – Sinhala Jan 30 '21 at 07:03
0

You suppose to add active class on anchor tag

Ruchita Vani
  • 61
  • 4