Issue with Bootstrap navbar active links in Firefox only

Question

I am having an issue with my boostrap single page navbars in Firefox only. If you click a link in the navbar that points to an anchor the active class is not changing therefore the style is not changing either. This is only happening in Firefox. It works in Safari, Chrome and IE. Any ideas?

<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
           <img class="m-t-10" src="images/crown.png" height="36" width="36"/>  
           <a class="navbar-brand pad-t-20 pad-l-15 pad-r-10" href="#">Brand Name</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav navbar-right m-r-15">
                <li class="active"><a href="#about">The Book</a></li>
               <li><a href="#inspiration">The Inspiration</a></li>
                <li><a href="#author">Author</a></li>
                <li><a href="#author">Illustrator</a></li>
                <li><a href="#connect">Connect</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
</nav>

CSS:

.navbar {
    border: 0;
    background-color: #570757;
    border-radius: 0px;
    margin: 0px;
    font-family: 'Josefin Sans', sans-serif;
    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.3);
    -moz-box-shadow: 0px 1px 4px rgba(0,0,0,.3);
    box-shadow: 0px 1px 4px rgba(0,0,0,.3);
}
.navbar .nav > li > a:hover {
    color:  #f5d431;
}
.navbar-default .navbar-nav> li > a,
.navbar-default .navbar-brand {
    color: #fff;
    margin-top: 10px;
}
.navbar-default .navbar-brand {
    padding: 0;
    margin: 0;
}
.navbar-collapse  {
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > .active > a:focus {
    color: #f5d431;
    background-color: inherit;
}
.navbar-default .navbar-nav > .active > a:hover {
    color:  #fff;
    background-color: inherit;
}