I'm currently working on creating a navigation bar that changes font weight to bold and color to teal when a link is clicked. The issue I'm facing is that when the links are clicked, they turn blue instead of teal and lose their bold formatting, except for the "About Me" link which remains bold.
Here's an example of the desired outcome for the navigation bar:
When an item is clicked, it should switch to bold and teal, while the other items should remain black and normal font weight.
$(document).ready(function() {
$("ul.navbar-nav > li").click(function(e) {
$("ul.navbar-nav > li").removeClass("active");
$(this).addClass("active");
});
});.navbar {
background: #FEFFFF !important;
}
.nav-link {
color: black;
padding-right: 0.5 rem;
padding-left: 0.5 rem;
}
.nav-item.active {
color: #4ba67f;
font-weight: bold;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-nav .nav-item:hover .nav-link {
color: #4ba67f;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464b4b50575056455464110a140a16">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="781a17170c0b0c0a1908384d5648564a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
<title>My Webpage</title>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-md">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><span>ABOUT ME</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span>CV</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span>PROJECTS</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span>GITHUB</span></a>
</li>
</ul>
</div>
</nav>