Navbar active class is not working in bootstrap 4

Question

I am trying to add active class to current opened link in navbar. I've Googled it a lot. There are a lot of questions similar to this question in Stack Overflow and answers also, but These all answers are for only hash type of navbar like href="#" and not working when I have a web sites and pages. I want to add active class properly. I've tried a lot, but didn't find perfect answer.

Here is my code:

<nav class="navbar navbar-expand-md navbar-dark sticky-top pt-0 pb-0">
    <div class="container nav_container">
        <a class="navbar-brand" href="<?php echo BASE_URL; ?>">
            <img src="<?php echo BASE_URL; ?>/resources/assets/img/logo/logo_default.png" class="img-fluid foodbox_logo">
        </a>
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainNavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="mainNavbar">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link active" href="<?php echo BASE_URL; ?>">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="<?php echo BASE_URL; ?>/shop.php">Shop</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="<?php echo BASE_URL; ?>/cart.php">Cart</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="<?php echo BASE_URL; ?>/about-us.php">About Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="<?php echo BASE_URL; ?>/contact-us.php">Contact Us</a>
            </li>
          </ul>
        </div>
    </div>
</nav>

JS:

<script>
    $(document).ready(function() {
        $('a.nav-link').on('click', '.nav-item a', function (e) {
            $(this).parent().addClass('active').siblings().removeClass('active');
        });
    });
</script>

Can someone please help me?

Answer 1

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');


    });

Answer 2

You can try below code.

$(document).ready(function() {
        $('.nav-link').on('click', '.nav-item a', function (e) {
             $('.navbar-nav .nav-link').find(".active").removeClass("active");
             $(this).parent().addClass('active');
        });
    });

Answer 3

The definition of jQuery is incorrect. In your code it is trying to find nav-item a inside a.nav-link and it won't find any. Just monitor the click for a.nav-link . For details see here

 $(document).ready(function() { /* Temporarily disable hyperlinks to see menu work */ $('a').attr("href", "#"); $('a.nav-link').on('click', function(e) { $(this).parent().addClass('active').siblings().removeClass('active'); }); }); 

 nav { background-color: red; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="navbar navbar-expand-md navbar-dark sticky-top pt-0 pb-0"> <div class="container nav_container"> <a class="navbar-brand" href="<?php echo BASE_URL; ?>"> <img src="<?php echo BASE_URL; ?>/resources/assets/img/logo/logo_default.png" class="img-fluid foodbox_logo"> </a> <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mainNavbar"> <ul class="navbar-nav ml-auto"> <!-- Put class active at the correct level --> <li class="nav-item active"> <a class="nav-link" href="<?php echo BASE_URL; ?>">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo BASE_URL; ?>/shop.php">Shop</a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo BASE_URL; ?>/cart.php">Cart</a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo BASE_URL; ?>/about-us.php">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo BASE_URL; ?>/contact-us.php">Contact Us</a> </li> </ul> </div> </div> </nav> 

Answer 4

I have tested this code and it's working. I changed your selector a bit. Give it a shot and see if it works for you. Adding nav link class to each anchor is redundant when you can simply use the selector below to get to each anchor in your nav.

I then traversed your nav anchors and removed the active class and appended active to the item that was clicked.

$(document).ready(function() {
        $(".navbar-nav li a").on('click', function (e) {

            $(".navbar-nav li").find('a').removeClass('active');
            $(this).addClass('active');
        });
});