Issue with Bootstrap navbar active links in Firefox only -
i having issue boostrap single page navbars in firefox only. if click link in navbar points anchor active class not changing therefore style not changing either. happening in firefox. works in safari, chrome , ie. ideas?
<!-- navigation --> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <!-- brand , toggle grouped 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 nav links, forms, , other content 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; }
Comments
Post a Comment