Admin navbar is not fully visible using mobile

[HelenWDTK]

The black admin nabber does not fully display on mobile, making some options inaccessible. You can work around it by rotating your phone, but a more mobile friendly solution would be better.

[garethrees]

Here's how it looks:

Bootstrap supports a responsive nav: https://getbootstrap.com/2.2.0/components.html#navbar

It looks like we've even half-attempted to use this: https://github.com/mysociety/alaveteli/blob/1d5a50919cb8ec4db55124c107d3cb9e57334d40/app/views/admin_general/_admin_navbar.html.erb#L6

Applying the following gets us nearly there, but borks the padding for some reason:

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index c1e7df9d9..17b7b64d0 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -47,6 +47,7 @@ body.admin {
   line-height: 20px;

   @import "bootstrap";
+  @import "bootstrap-responsive";

   #main {
     flex: 1;
diff --git a/app/views/admin_general/_admin_navbar.html.erb b/app/views/admin_general/_admin_navbar.html.erb
index 23384a12a..f6a440fdc 100644
--- a/app/views/admin_general/_admin_navbar.html.erb
+++ b/app/views/admin_general/_admin_navbar.html.erb
@@ -2,8 +2,16 @@
 <div id="admin-navbar" class="navbar navbar-fixed-top navbar-inverse">
   <div class="navbar-inner">
     <div class="container">
+
+      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </a>
+
       <%= link_to 'Alaveteli', frontpage_path, :class => "brand" %>
-      <div class="nav-collapse">
+
+      <div class="nav-collapse collapse">
         <ul class="nav">
           <% if session[:user_circumstance] == 'login_as' %>