I am facing an issue with my navbar that collapses perfectly. However, when using the script below to automatically hide the menu upon clicking a menu item:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('.navbar-collapse.in').removeClass('.in').css('height', '0');
});
This method worked flawlessly in BS2. But now, the menu is not closing completely anymore and I have to click the toggle button twice to open it again. The difference can be subtle, but if you look closely at the bottom of the second image.
Menu before closing:
https://i.sstatic.net/tXeb8.png
Menu after closing:
https://i.sstatic.net/C1ZSu.png
The HTML structure:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="collapse navbar-collapse">
<ul id="myTab" class="nav navbar-nav">
<li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab2</a></li>
<li><a href="#tab3" data-toggle="tab">Tab3</a></li>
<li><a href="#tab4" data-toggle="tab">Tab4</a></li>
<li><a href="#tab5" data-toggle="tab">Tab5</a></li>
<li><a href="#tab6" data-toggle="tab">Tab6</a></li>
<li><a href="#tab7" data-toggle="tab">Tab7</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#tab8" data-toggle="tab">Tab8</a></li>
</ul>
</div>
</nav>