NAV Hamburger wont open

Question

When I enter a smaller screen and the hamburger icon enables, nothing happens when I click on it. It does not work. My code is as follows, please help:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/stylesheets/main.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="/">GroupWrites</a>
    </div>

     <!--Collect the nav links, forms, and other content for toggling -->
    <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/browse">Browse</a></li>
        <li><a href="/library">Library</a></li>
        <li><a href="/about">How It Works</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <% if(!currentUser){ %>
        <li><a href="/register">Sign Up <i class="fa fa-user-plus"></i></a></li>
        <li><a href="/login">Log In <i class="fa fa-user-circle"></i></a></li>
        <% } else { %>
        <li><a href="#">Signed In As <%= currentUser.username %></a></li>
        <li><a href="/logout">Log Out <i></i></a></li>
        <% } %>
        </ul>
    </div>
  </div>
</nav>

@nguer092 Welcome to stackOverflow, If any answer helps you [vote it up](http://meta.stackexchange.com/questions/173399/how-to-upvote-on-stack-overflow), If the answer is what you looking for mark it as [Correct answe](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) for the future readers. Thank you! — Dalin Huang, May 07 '17 at 15:01

score 1 · Accepted Answer · answered May 07 '17 at 04:01

You are missing 3.3.7/js/bootstrap.min.js and jquery? :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/stylesheets/main.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="/">GroupWrites</a>
    </div>

     <!--Collect the nav links, forms, and other content for toggling -->
    <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/browse">Browse</a></li>
        <li><a href="/library">Library</a></li>
        <li><a href="/about">How It Works</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <% if(!currentUser){ %>
        <li><a href="/register">Sign Up <i class="fa fa-user-plus"></i></a></li>
        <li><a href="/login">Log In <i class="fa fa-user-circle"></i></a></li>
        <% } else { %>
        <li><a href="#">Signed In As <%= currentUser.username %></a></li>
        <li><a href="/logout">Log Out <i></i></a></li>
        <% } %>
        </ul>
    </div>
  </div>
</nav>

Thank you ..problem solved. So simple, don't know how that slipped. — SalokinSwift, May 07 '17 at 16:56
@nguer092 and order matters too, load css then load jQuery then bootstrap js — Dalin Huang, May 07 '17 at 16:59
thank you! found them actually for some reason they were in my footer? Can i erase them from there now? — SalokinSwift, May 09 '17 at 02:56
@nguer092 It is generally preferred to put all script links at the bottom just above your `<\body>` tag. This includes jQuery, Bootstrap, and any other custom JS scripts. — kojow7, May 11 '17 at 15:28
@kojow7 please read this one, put script before `
` was like 10 years ago. And for most of the pages are static and internet speed was slow at that time. http://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup — Dalin Huang, May 11 '17 at 15:35
@DanielH, it would seem that I stand corrected. However, why are you not using `defer` in your script tags here? — kojow7, May 11 '17 at 16:53
@nguer092 as @kojow7 said, it is better you put all your CSS at `head` but all your ` — Dalin Huang, May 11 '17 at 16:57

NAV Hamburger wont open

1 Answers1