Roscoe Roscoe - 15 days ago 7
HTML Question

Bootstrap Nav Bar not closing on mobile

I am using the bootstrap navbar-toggle and targeting the class navbar-collapsed but my navbar is not automatically closing on mobile:

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
<a class="navbar-brand scrollTo" href="#intro"><img id="bg-img" src="./img/hn-logo.png"></a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#intro">Home</a>
</li>
<li><a href="#section1">Products</a>
</li>
<li><a href="#section2">Learn</a>
</li>
<li><a href="#section3">Lab Testing</a>
</li>
<li><a href="#section4">Partners</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>

Answer

Try this, add this Jquery in script tag

 <script type="text/javascript">
$('.nav a').on('click', function () {
    $('.btn-navbar').click(); //bootstrap 2.x
    $('.navbar-toggle').click() //bootstrap 3.x  
});
</script>