CSS Nav bar Collapse down Menu issue - html

Question

I'm trying to customise the navigation bar on a website. The part that I'm having trouble with is the three line thing that should reveal the rest of the menu in a drop down way when the screen is small.
When I click on the 3 line button, nothing happens and I can't access the rest of the menu bar but it changes colour when I click it so I know it knows that I have clicked on it.
Here is my application.html file:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<%= link_to 'Home', root_path, class: 'navbar-brand' %>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<%= render 'layouts/navigation_links' %>
</ul>
</div>
</div>
</nav>
and here is the layout/navigation_links that list the links that I want to show
<%# add navigation links to this file %>
<% if user_signed_in? %>
<li><%= link_to 'Edit account', edit_user_registration_path %></li>
<li><%= link_to 'Sign out', destroy_user_session_path, :method=>'delete' %></li>
<% else %>
<li><%= link_to 'Sign in', new_user_session_path %></li>
<li><%= link_to 'Sign up', new_user_registration_path %></li>
<% end %>
<% if user_signed_in? %>
<li><%= link_to 'Users', users_path %></li>
<% end %>
and here is my application.css file (under assets/stylesheets)
body{
margin-right: 10px;
margin-left: 10px;
background-color: #eeeeee;
}
.navbar-inverse{
background-color: #000000;
}
.navbar-inverse{
border-color: #33aa22;
}
When the webpage is full size the rest of the menu bar appears and the navigation_links appear and work.
I have no clue why it isnt working when the page is small so any help would be great!