Bootstrap NavBar Hamburger Menu not working on Mobile

Question

When I make the window smaller on my mac the hamburger menu appears but on mobile it does not. The navbar just becomes very unformatted. Any kind of help will be much appreciated. Thanks!

    <nav class="navbar navbar-inverse">
  <div class="container">
    <div class = "row">
      <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>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><%= link_to "HomePage", listings_path %></li>
          <li><%= link_to "Reviews", reviews_path %> </li>
          <li><%= link_to "My Personal Listings", mylistings_path %></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <%if user_signed_in? && current_user.admin? %>
                  <li><%= link_to "Admin Page", users_path %></li>
                  <li><%= link_to "Add a Personal Listing", new_mylisting_path %></li>
                <%end%>
              </ul>
            </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Your Account <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><%= link_to 'Sign In', new_user_session_path %></li>
                    <li><%= link_to 'Sign Up', new_user_registration_path %></li>
                    <li><%= link_to('Sign Out', destroy_user_session_path, :method => :delete) %></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Additional Resources<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><%= link_to 'Zillow', "http://www.zillow.com/", :target => "_blank"%></li>
                    <li><%= link_to 'Realtor.com', "https://www.realtor.com/", :target => "_blank"%></li>
                    <li><%= link_to "Multiple Listing Service", "http://www.mls.com/", :target => "_blank"%></li>
                    <li><%= link_to 'Trulia', "https://www.trulia.com/", :target => "_blank"%></li>
                    <li><%= link_to 'Redfin', "https://www.redfin.com/", :target => "_blank"%></li>
                    </ul>
                    </li>
                  </ul>
          </div>
        </div>
      </div>
  </nav>

Answer 1

It works fine. You didn't add the second two icon bars. See snippet below or codepen .

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <nav class="navbar navbar-inverse"> <div class="container"> <div class = "row"> <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> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><%= link_to "HomePage", listings_path %></li> <li><%= link_to "Reviews", reviews_path %> </li> <li><%= link_to "My Personal Listings", mylistings_path %></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a> <ul class="dropdown-menu"> <%if user_signed_in? && current_user.admin? %> <li><%= link_to "Admin Page", users_path %></li> <li><%= link_to "Add a Personal Listing", new_mylisting_path %></li> <%end%> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Your Account <span class="caret"></span></a> <ul class="dropdown-menu"> <li><%= link_to 'Sign In', new_user_session_path %></li> <li><%= link_to 'Sign Up', new_user_registration_path %></li> <li><%= link_to('Sign Out', destroy_user_session_path, :method => :delete) %></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Additional Resources<span class="caret"></span></a> <ul class="dropdown-menu"> <li><%= link_to 'Zillow', "http://www.zillow.com/", :target => "_blank"%></li> <li><%= link_to 'Realtor.com', "https://www.realtor.com/", :target => "_blank"%></li> <li><%= link_to "Multiple Listing Service", "http://www.mls.com/", :target => "_blank"%></li> <li><%= link_to 'Trulia', "https://www.trulia.com/", :target => "_blank"%></li> <li><%= link_to 'Redfin', "https://www.redfin.com/", :target => "_blank"%></li> </ul> </li> </ul> </div> </div> </div> </nav>