CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Amol Borkar
Amol Borkar

Reputation: 2599

Bootstrap navbar-collapse button not working

I know this has been asked thousands of time and I've been looking at some of the similar questions for about and an hour now.

I can't figure out whats the problem in my code and no matter what solution I try it doesn't works.

Here is the navbar snippet in my project (derived from the bootstrap docs):

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale = 1">
    <title>{{ title }}</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>

  <body>

  <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target"#rtNavbar" aria-expanded="false">
        <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" href="#">TestApp01</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-collapse" id="rtNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact Us</a></li>
              <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button>
      </form>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<!-- Some more stuff here -->
<script   src="https://code.jquery.com/jquery-3.1.1.min.js"        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="     crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

I'm using bootstrap 3 for a express node.js app. And I'm using hogan templating if that matters.

Upvotes: 1

Views: 3804

Answers (4)

Tad
Tad

Reputation: 3

Part of the problem might be the way (and where) the JS and jQuery is embedded in your code. I noticed - at least for the JS - that there isn't a closing </script> tag. I think your problem may be as simple as not having these tags in the right place and not being closed properly.

I've used the following <script> additions in the <head> and had the collapse button work, so you may want to try these within the <head>. It may even be as simple as not including these two scripts right below the Bootstrap CSS link. It should look something like this (for Bootstrap 3):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

You've also got a problem with the data-target in your <button> tag. Try using something like data-target""#myNavbar" instead.

The other thing is that you have a redundant navbar-collapse for the second <div> pertaining to the right-aligned elements in your bar. This could muddy the waters and cause problems. Otherwise, the rest of the code materials look good. Just try declaring the above code in the <head>. Good luck!

Upvotes: 0

Asifuzzaman
Asifuzzaman

Reputation: 1783

change your data target its wrong try like this 

  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#rtNavbar" aria-expanded="false">

If doesn't thats because of Bootstrap 3 is not compatible with jQuery 3.0 and above at the moment. So latest version of jQuery that can be used with Bootstrap 3 is 2.2.4.

Upvotes: 0

Shankar Shastri
Shankar Shastri

Reputation: 1154

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale = 1">
    <title>{{ title }}</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>

  <body>

  <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
        <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" href="#">TestApp01</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-collapse" id="rtNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact Us</a></li>
              <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button>
      </form>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<!-- Some more stuff here -->
<script   src="https://code.jquery.com/jquery-3.1.1.min.js"        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="     crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"

Just Make This Change In The data-target. https://gist.github.com/anonymous/916bb0286c966660121fecbafdd9140a

Upvotes: 1

user6748331
user6748331

Reputation:

Its because Bootstrap is not compatible with jQuery 3. Use jQuery 2, or embed jQuery Migrate after jQuery.

Upvotes: 0

Related Questions