Need with with changing the color active nav links

Its a single page website. Here I wish to change the color of the active section on the navigation. I have added the following code but this only seems to work on force state over the link.

Let me know  if anyone knows other ways to make this happen. Thanks team 

57 minutes ago, bhavanaidnani said:

Its a single page website. Here I wish to change the color of the active section on the navigation. I have added the following code but this only seems to work on force state over the link.

.header-nav-item a:active {

1. color: #fc9e4f !important;

}

Tired this one as well

body:not(.header--menu-open) .header-nav-wrapper 

a:active {

1. color: #fc9e4f !important;

}

Let me know  if anyone knows other ways to make this happen. Thanks team 

Can you share your site with the protected password so we can take a look?

37 minutes ago, bangank36 said:

Can you share your site with the protected password so we can take a look?

https://mustard-magenta-z7b6.squarespace.com/

password: firstlook

@bhavanaidnani Add to Settings > Advanced > code Injection > Footer

<script>
var btnContainer = document.getElementById("header");
var btns = btnContainer.getElementsByTagName("a");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    this.className += " active";
  });
}
</script>
<style>
  .header-nav-item a.active {
   color: red !important;
}
</style>