Bootstrap Navbar with button active - I cannot clear it - html

Question

I have this older site (Bootstrap 3.3.6) I put together for a client and have noticed that a button in the navbar is noted as active and I can't seem to clear it.
It visually looks like this :
Screenshot of issue with buttons
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#registration">REGISTRATION & PROGRAMS</a>
</li>
<li>
<a class="page-scroll" href="#coaches">OUR COACHES</a>
</li>
<li>
<a class="page-scroll" href="#contact">CONTACT</a>
</li>
<li>
<img src="img/FB-f-Logo50px.png" alt="Find us on Facebook!">
</li>
</ul>
</div>
When I view it under active circumstances the button for CONTACT displays as such :
<li class="active">
<a class="page-scroll" href="#contact">CONTACT</a>
</li>
CSS :
a {
font-family: "HypatiaSansPro-Regular";
color:#CC3333;}
.btn {
background-color: #CC3333;
outline-color: #CC3333;}
.btn:hover,
.btn:focus,
.btn.active {
background-color: #993333;
outline-color: #CC3333;}
.contact-section {
padding-top: 100px;
padding-top: 100px;
padding-bottom: 50px;
text-align: center;
background: #eee;}
If I change the order of the buttons I will get the same issue for any of the buttons that are last.
This is a one page bootstrap site, the page has 3 anchors. I can send private messages of the site in question if it helps.
It's a minor issue, but it is really bothering me that there is a conflict and I cannot clear it. Any feedback?

Answer 1

Bootstrap adds a class that highlights the active element:
.navbar-nav>.active>a{
color: #555;
background-color: #e7e7e7;
}
You can overwrite that selector by placing the same selector with the values you want in a css stylesheet loaded after bootstrap's css.
.navbar-nav>.active>a{
color: #777;
background-color: transparent;
}
Alternatively you can to remove the .active class somehow. But I think bootstrap adds that automatically. So that would probably be a hassle to do.