Bold and change font color of active nav bar item on click-CodePudding

I am trying to make a nav bar where the font changes to bold and color changes to teal when the link is clicked. The problem I'm having is when the links are clicked they change to a blue color and are not bold. About Me stays bolded

Here is an example of what I am trying to achieve with the nav bar: https://junye0798.com/

When the item is clicked its set to bold and color teal while the other items set to black and not bold

$(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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 >
  <div >
    <ul >
      <li >
        <a  href="#"><span>ABOUT ME</span></a>
      </li>
      <li >
        <a  href="#"><span>CV</span></a>
      </li>
      <li >
        <a  href="#"><span>PROJECTS</span></a>
      </li>
      <li >
        <a  href="#"><span>GITHUB</span></a>
      </li>
    </ul>
  </div>
</nav>

CodePudding user response：

you're actually setting the active class to the li, but there is a tag inside of it, so it would only color the li tag and not the a tag, to solve this add this CSS

.nav-item.active , .nav-item.active a {
  color: #4ba67f;
  font-weight: bold;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

CodePudding user response：

Try changing your CSS to this...

.navbar{
    background:#FEFFFF !important; 
}
.nav-link{
    padding-right: 0.5 rem;
    padding-left: 0.5 rem;
}
.nav-item > a {
color:black;
}
.nav-item.active > a{
    color:#4ba67f;
    font-weight: bold;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.navbar-nav .nav-item:hover .nav-link {
    color: #4ba67f ;
}