Bootstrap Navbar Active State Not Working

Bootstrap navbar Active State not working

You have included the minified Bootstrap js file and collapse/transition plugins while the docs state that:

Both bootstrap.js and bootstrap.min.js contain all plugins in a single file.

Include only one.

and

For simple transition effects, include transition.js once alongside
the other JS files. If you're using the compiled (or minified)
bootstrap.js, there is no need to include this—it's already there.

So that could well be your problem for the minimize problem.

For the active class, you have to manage it yourself, but it's just a line or two.

Bootstrap 3:

$(".nav a").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});

Bootply: http://www.bootply.com/IsRfOyf0f9

Bootstrap 4:

$(".nav .nav-link").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).addClass("active");
});

Navbar active class is not working in bootstrap 4

Use the below snippet and also add / at the end of the url's in the navbar.

   $(document).ready(function() {

   var url = [location.protocol, '//', location.host, location.pathname].join('');  

            $('.nav-item.active').removeClass('active');
            $('.nav-item a[href="' + url  + '"]').parent().addClass('active');
            $(this).parent().addClass('active').siblings().removeClass('active');


    });

bootstrap 4 .active class not changing on click

I found a solution thanks to the answer of Jon here !!! :)
I changed the JS code to:

$(document).ready(function() {
  $('li.active').removeClass('active');
  $('a[href="' + location.pathname + '"]').closest('li').addClass('active'); 
});

Now it works fine :)

How do I make Bootstrap navbar change active state?

You can do this one an the end of your code. Just below <script src="main.js"></script>

<script>
$(document).ready(function() {
    $( ".mr-auto .nav-item" ).bind( "click", function(event) {
        event.preventDefault();
        var clickedItem = $( this );
        $( ".mr-auto .nav-item" ).each( function() {
            $( this ).removeClass( "active" );
        });
        clickedItem.addClass( "active" );
    });
});
</script>

And them instead of follow by link (event.preventDefault()) eg. about.html OR uploads.html this snipet of code change active class for clicked item.

---

EDIT 1:

For static pages (or served eg. by php) you don't need any aditional js code, BUT you should tweak nav to looks like in below examples (look where 'active' class is, sr-only span current is optional, but well placed in examples).

index.html (your base code)

<ul class="navbar-nav mr-auto">
    <li class="nav-item active">
        <a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="library.html">Library</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="uploads.html">Uploads</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="about.html">About</a>
    </li>
</ul>

---

library.html

<ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item active">
        <a class="nav-link" href="library.html">Library<span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="uploads.html">Uploads</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="about.html">About</a>
    </li>
</ul>

---

uploads.html

<ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="library.html">Library</a>
    </li>
    <li class="nav-item active">
        <a class="nav-link" href="uploads.html">Uploads<span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="about.html">About</a>
    </li>
</ul>

---

about.html

<ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="library.html">Library</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="uploads.html">Uploads</a>
    </li>
    <li class="nav-item active">
        <a class="nav-link" href="about.html">About<span class="sr-only">(current)</span></a>
    </li>
</ul>

Bootstrap Navbar Active State Switching Bootstrap (Javascript Related)

You dont appear to have an ancestor to the nav list with the class of "nav" - also the nav-link li's are what should get the 'active' class - not the 'a' within it.

Also - you can target the active item directly to remove the active class - whether its the li or the a.

if you want to keep the active class on the a - then just change the click handler

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

If you want the active class on the li - then
if you want to keep the active class on the a - then just change the click handler

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

---

Related Topics