Navbar class is not active on click using jquery - html

Question

I want to active nav-bar menu when clicked from nav bar, i am using the following code, to active nav menu when clicked, but it is not working for me.
i am using bootstrap classes for add nav-bar into my webpage.
please help me to find where i am mistaken?
$(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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="main-header" class="header header1">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="./">
<img src="images/site-logo.png" alt="Site-logo">
</a>
<div id="toggle-icon" class="icon-btn">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu-nav" class="navigation-menu">
<div class="navbar-collap" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="careers">Careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio">Portfolio</a>
</li>
<li class="nav-item contact-link">
<a class="nav-link" href="contact">Contact-us</a>
</li>
</ul>
<div class="button">
<a class="btn btn1" id="cont" href="contact.php">contact us <i class="icon-feature-6"></i></a>
</div>
</div>
</div>
</nav>
</header>

Answer 1

The .active class does not highlight the nav-link.
Solution 1
add css:
.mr-auto .nav-item.active a{background: blue;color:#fff}
Solution 2
Try this:
$(document).ready(function() {
$(".mr-auto .nav-item a").bind("click", function(event) {
event.preventDefault();
var clickedItem = $(this);
$(".mr-auto .nav-item a.active").removeClass("active btn-primary");
clickedItem.addClass("active btn-primary");
});
});