Add skip to nave on mobile

Signed-off-by: Josh Angell <josh@supercooldesign.co.uk>

3 files changed, 19 insertions, 2 deletions

diff --git a/templates/web/fixmystreet/header.html b/templates/web/fixmystreet/header.html
index 4d5b0243a..b6404b91c 100644
--- a/templates/web/fixmystreet/header.html
+++ b/templates/web/fixmystreet/header.html
@@ -34,6 +34,7 @@
         <header id="header" role="banner">
             <div class="container">
                 <a href="/" id="site-logo">FixMyStreet</a>
+                <a href="#main-nav" id="nav-link">Main Navigation</a>
             </div>
         </header>
 
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index c9fdf054a..1fd4968f6 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -298,9 +298,9 @@ label{
 
 // #header creates grey bar in mobile, .nav-wrapper-2 is used on desktop
 #header{
-  @include background-image(linear-gradient(#000, #222 10%, #222 90%, #000));
   border-top: 0.25em solid $primary;
   height: 4em;
+  @include background(linear-gradient(#000, #222 10%, #222 90%, #000));
   .container {
     min-height:4em;
   }
@@ -308,12 +308,25 @@ label{
     width: 175px;
     height: 40px;
     margin-top: 0.75em;
-    background: url('images/main-sprite.png') -3px -3px no-repeat;
+    background: url('images/sprite.png') -3px -3px no-repeat;
     display: block;
     text-indent: -999999px;
     position: absolute;
     z-index:2;
   }
+  #nav-link {
+    width: 50px;
+    height: 48px;
+    background: url('images/sprite.png') -5px -916px no-repeat;
+    display: block;
+    text-indent: -999999px;
+    position: absolute;
+    right:2em;
+    top:-2px;
+    &:hover {
+      top:2px;
+    }
+  }
 }
 
 #main-nav{
diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss
index e3bdd561c..8724d3ff4 100644
--- a/web/cobrands/fixmystreet/layout.scss
+++ b/web/cobrands/fixmystreet/layout.scss
@@ -51,6 +51,9 @@
     position: fixed;
     z-index: 3;
   }
+  #nav-link {
+    left:-999999px;
+  }
 }