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..

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="navbar-wrapper">
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" 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>
                    </button>
                    <a class="navbar-brand" herf="/"><img src="assets/img/logo.png" alt="Bootstrap to WordPress"></a>
                </div><!-- navbar-header -->
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="">First Menu Item</a>
                        </li>
                        <li>
                            <a href="">Second Menu Item</a>
                        </li>
                        <li>
                            <a href="">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"