Skip to content Skip to sidebar Skip to footer

Navbar Collapse Is Not Working In Bootstrap

@Bhanu pratap solved the problem. check it out at the end of this question. I've been following an old course to build a navbar collapse (sandwich). The problem is the page in the

Solution 1:

Try this.. i have just added ul and li to your code to show visible effect you can use your code section there..

<scriptsrc="https://code.jquery.com/jquery-2.1.3.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script><linkhref="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"rel="stylesheet"/><divclass="navbar-wrapper"><divclass="navbar navbar-inverse navbar-fixed-top"role="navigation"><divclass="container"><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target=".navbar-collapse"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"herf="/"><imgsrc="assets/img/logo.png"alt="Bootstrap to WordPress"></a></div><!-- navbar-header --><divclass="navbar-collapse collapse"><ulclass="nav navbar-nav"><li><ahref="">First Menu Item</a></li><li><ahref="">Second Menu Item</a></li><li><ahref="">Third Menu Item</a></li></ul></div><!-- collapse nav--></div><!-- container --></div><!-- navbar --></div>

Solution 2:

$(document).on('click','.navbar-collapse.in',function(e) {
   if( $(e.target).is('a') && ( $(e.target).attr('class') != 'dropdown-toggle' ) ) {
   $(this).collapse('hide');
} });

$("button.navbar-toggle").click(function (e) {
  $("#main-navbar").collapse('hide');
  $("#main-navbar").removeClass("in"); });

Post a Comment for "Navbar Collapse Is Not Working In Bootstrap"