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?

Where in the code are you checking for the current url/path? — Carol Skelly, Sep 16 '19 at 12:26

score 2 · Accepted Answer · answered Sep 16 '19 at 13:18

2

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


    });

answered Sep 16 '19 at 13:18

Muhammad Osama

985
8
17

Worked but I wanna add active class to `.nav-link` instead of `.nav-item`. – Zain Shabir Sep 17 '19 at 05:27
anyway, I customized it and worked perfectly. Thanks a lot brother – Zain Shabir Sep 17 '19 at 05:49
But why with "/", i mean it's on localhost for now, but after 2 or 3 days we are launching it, and domain home page can't have "/", what should i do then? – Zain Shabir Sep 17 '19 at 14:21

Gerard · Answer 2 · 2019-09-16T13:01:17.837

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>

Brother, It's only for hash type of links `href="#"`. I don't need this. I've already mentioned in question that I have multi pages. I need it properly — Zain Shabir, Sep 16 '19 at 13:06

Pushprajsinh Chudasama · Answer 3 · 2019-09-16T12:56:18.853

0

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

edited Sep 16 '19 at 12:56

answered Sep 16 '19 at 12:48

Pushprajsinh Chudasama

7,772
4
20
43

Brother, I've seen this code and tried already. It works only on hash type of link `href="#"` single page website. But i have multi pages. It didn't work – Zain Shabir Sep 16 '19 at 12:51
Refrences https://stackoverflow.com/questions/24514717/bootstrap-navbar-active-state-not-working – Pushprajsinh Chudasama Sep 16 '19 at 13:00
Broter, I've already checked these all. Not working any of them. They all are for single page website like `href="#"` – Zain Shabir Sep 16 '19 at 13:02

Joe Z · Answer 4 · 2019-09-16T13:41:43.537

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

Navbar active class is not working in bootstrap 4

4 Answers4