[Stevenage] Responsive header for Stevenage cobrand

8 files changed, 319 insertions, 209 deletions

diff --git a/templates/web/stevenage/footer.html b/templates/web/stevenage/footer.html
index f9bf63fb6..b81a949a1 100644
--- a/templates/web/stevenage/footer.html
+++ b/templates/web/stevenage/footer.html
@@ -32,6 +32,62 @@
         </div><!-- .table-cell -->
 
         <div class="nav-wrapper">
+
+
+          <header id="stevenage_cc_header" role="banner">
+          <div id="stv-headerWrapper">
+            <div id="stv-header">
+              <div class="stv-inner">
+
+                <div id="stv-logo">
+                  <h1><a href="/"><img src="http://www.stevenage.gov.uk/Images/logo.gif" alt="Stevenage Borough Council"></a></h1>
+                </div>
+
+                <div class="stv-mapLogo">
+                  <img src="http://www.stevenage.gov.uk/Images/mapLogo.gif" alt="">
+                </div>
+
+                <div id="stv-pageTools" class="stv-floatHolder">
+                  <div id="stv-searchStatic">
+                    <label for="search">Search</label> <input type="hidden" name="view" value="Search results"> <input name="search" type="text" value="" placeholder="Search for..." id="stv-search" class="stv-searchInput"> <input type="submit" value="GO">
+                  </div>
+                </div>
+
+                <div class="stv-parf stv-floatHolder">
+                  <a href="http://www.stevenage.gov.uk/pay/"><span class="stv-title">Pay</span> your Council Tax bill and more</a> <a href="http://www.stevenage.gov.uk/apply/"><span class="stv-title">Apply</span> for planning permission and more</a> <a href="http://www.stevenage.gov.uk/report/"><span class="stv-title">Report</span> a missed bin and more</a> <a href="http://www.stevenage.gov.uk/find/" class="stv-find"><span class="stv-title">Find</span> your local councillor and more</a>
+                </div>
+
+              </div>
+            </div>
+            <div id="stv-menu">
+              <div id="stv-primaryNavigation">
+                <ul id="stv-ctl00_ctl00_PrimaryNavigationLinks" class="stv-floatHolder">
+                  <li>
+                    <a href="http://www.stevenage.gov.uk/council-services/">Council Services</a>
+                  </li>
+                  <li>
+                    <a href="http://www.stevenage.gov.uk/about-the-council/">About the Council</a>
+                  </li>
+                  <li>
+                    <a href="http://www.stevenage.gov.uk/about-stevenage/">About Stevenage</a>
+                  </li>
+                  <li>
+                    <a href="http://www.stevenage.gov.uk/news-and-events/">News and Events</a>
+                  </li>
+                  <li>
+                    <a href="http://www.stevenage.gov.uk/links/">Popular Links</a>
+                  </li>
+                  <li>
+                    <a href="http://www.stevenage.gov.uk/have-your-say/">Have Your Say</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          </header>
+
+
+
             <div class="nav-wrapper-2">
                 <div id="main-nav" role="navigation">
                     <ul class="nav-menu nav-menu--main">
diff --git a/templates/web/stevenage/header.html b/templates/web/stevenage/header.html
index 11e362612..ffcc9ec86 100644
--- a/templates/web/stevenage/header.html
+++ b/templates/web/stevenage/header.html
@@ -22,7 +22,7 @@
         <script src="[% version('/cobrands/fixmystreet/position_map.js') %]" charset="utf-8"></script>
         [% INCLUDE 'common_header_tags.html' %]
         [% extra_js %]
-                
+
         [% INCLUDE 'tracking_code.html' %]
         [% PROCESS 'header_extra.html' %]
     </head>
@@ -30,59 +30,9 @@
 
     <div class="wrapper">
         <div class="table-cell">
-            <header id="stevenage_cc_header" role="banner">
-    <div id="stv-headerWrapper">
-      <div id="stv-header">
-        <div class="stv-inner">
-          
-          <div id="stv-logo">
-            <h1><a href="/"><img src="http://www.stevenage.gov.uk/Images/logo.gif" alt="Stevenage Borough Council"></a></h1>
-          </div>
-          
-          <div class="stv-mapLogo">
-            <img src="http://www.stevenage.gov.uk/Images/mapLogo.gif" alt="">
-          </div>
-          
-          <div id="stv-pageTools" class="stv-floatHolder">
-            <div id="stv-searchStatic">
-              <label for="search">Search</label> <input type="hidden" name="view" value="Search results"> <input name="search" type="text" value="" placeholder="Search for..." id="stv-search" class="stv-searchInput"> <input type="submit" value="GO">
-            </div>
-          </div>
-          
-          <div class="stv-parf stv-floatHolder">
-            <a href="http://www.stevenage.gov.uk/pay/"><span class="stv-title">Pay</span> your Council Tax bill and more</a> <a href="http://www.stevenage.gov.uk/apply/"><span class="stv-title">Apply</span> for planning permission and more</a> <a href="http://www.stevenage.gov.uk/report/"><span class="stv-title">Report</span> a missed bin and more</a> <a href="http://www.stevenage.gov.uk/find/" class="stv-find"><span class="stv-title">Find</span> your local councillor and more</a>
-          </div>
-          
-        </div>
-      </div>
-      <div id="stv-menu">
-        <div id="stv-primaryNavigation">
-          <ul id="stv-ctl00_ctl00_PrimaryNavigationLinks" class="stv-floatHolder">
-            <li>
-              <a href="http://www.stevenage.gov.uk/council-services/">Council Services</a>
-            </li>
-            <li>
-              <a href="http://www.stevenage.gov.uk/about-the-council/">About the Council</a>
-            </li>
-            <li>
-              <a href="http://www.stevenage.gov.uk/about-stevenage/">About Stevenage</a>
-            </li>
-            <li>
-              <a href="http://www.stevenage.gov.uk/news-and-events/">News and Events</a>
-            </li>
-            <li>
-              <a href="http://www.stevenage.gov.uk/links/">Popular Links</a>
-            </li>
-            <li>
-              <a href="http://www.stevenage.gov.uk/have-your-say/">Have Your Say</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-    </header>
             <header id="site-header">
                 <div class="container">
+                    [% INCLUDE 'header_logo.html' %]
                     <a href="#main-nav" id="nav-link">Main Navigation</a>
                 </div>
             </header>
@@ -90,7 +40,7 @@
           [% IF c.user_exists %]
             <div id="user-meta">
                 <p>
-                    [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %] 
+                    [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %]
                     <a href="/auth/sign_out">[% loc('sign out') %]</a>
                 </p>
             </div>
diff --git a/templates/web/stevenage/header_logo.html b/templates/web/stevenage/header_logo.html
new file mode 100644
index 000000000..b30c1d811
--- /dev/null
+++ b/templates/web/stevenage/header_logo.html
@@ -0,0 +1,2 @@
+                    <a href="[% c.cobrand.base_url IF admin %]/" id="site-logo"><img src="http://www.stevenage.gov.uk/Images/logo.gif" width="82" height="45"></a>
+                    <a href="[% c.cobrand.base_url IF admin %]/" id="report-cta" title="[%- loc('Report a problem') -%]">[%- loc('Report') -%]</a>
diff --git a/web/cobrands/stevenage/_colours.scss b/web/cobrands/stevenage/_colours.scss
index 6b0d1bcdd..54eda1b2c 100644
--- a/web/cobrands/stevenage/_colours.scss
+++ b/web/cobrands/stevenage/_colours.scss
@@ -1,5 +1,6 @@
 /* COLOURS */
 
+$menu-image: 'menu-black';
 
 $primary: #066539;
 $primary_b: $primary;
diff --git a/web/cobrands/stevenage/_council_header.scss b/web/cobrands/stevenage/_council_header.scss
index a33d07dd4..64ef45feb 100644
--- a/web/cobrands/stevenage/_council_header.scss
+++ b/web/cobrands/stevenage/_council_header.scss
@@ -3,14 +3,14 @@
 
     /*    1.stv- =FontFace Declarations
     --------------------------------------------------*/
-    @font-face { font-family: 'PTSansNarrowRegular'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN57F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN57F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN57F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN57F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN57F-webfont.svg#stv-webfontpTBqgUZV') format('svg'); font-weight: normal; font-style: normal; } 
-    @font-face { font-family: 'PTSansCaptionBold'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC75F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC75F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC75F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC75F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC75F-webfont.svg#stv-webfont8zHvniZB') format('svg'); font-weight: normal; font-style: normal; } 
-    @font-face { font-family: 'PTSansCaptionRegular'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC55F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC55F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC55F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC55F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC55F-webfont.svg#stv-webfont7qk7wodx') format('svg'); font-weight: normal; font-style: normal; } 
-    @font-face { font-family: 'PTSansBoldItalic'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS76F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS76F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS76F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS76F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS76F-webfont.svg#stv-webfont2oPncueb') format('svg'); font-weight: normal; font-style: normal; } 
-    @font-face { font-family: 'PTSansBold'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS75F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS75F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS75F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS75F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS75F-webfont.svg#stv-webfontaW07W6NV') format('svg'); font-weight: normal; font-style: normal; } 
-    @font-face { font-family: 'PTSansItalic'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS56F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS56F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS56F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS56F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS56F-webfont.svg#stv-webfontV5YcF68V') format('svg'); font-weight: normal; font-style: normal; } 
-    @font-face { font-family: 'PTSansRegular'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS55F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS55F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS55F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS55F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS55F-webfont.svg#stv-webfontakBUUg6U') format('svg'); font-weight: normal; font-style: normal; } 
-    @font-face { font-family: 'PTSansNarrowBold'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN77F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN77F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN77F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN77F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN77F-webfont.svg#stv-webfontSTdD4QCq') format('svg'); font-weight: normal; font-style: normal; } 
+    @font-face { font-family: 'PTSansNarrowRegular'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN57F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN57F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN57F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN57F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN57F-webfont.svg#stv-webfontpTBqgUZV') format('svg'); font-weight: normal; font-style: normal; }
+    @font-face { font-family: 'PTSansCaptionBold'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC75F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC75F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC75F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC75F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC75F-webfont.svg#stv-webfont8zHvniZB') format('svg'); font-weight: normal; font-style: normal; }
+    @font-face { font-family: 'PTSansCaptionRegular'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC55F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC55F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC55F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC55F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTC55F-webfont.svg#stv-webfont7qk7wodx') format('svg'); font-weight: normal; font-style: normal; }
+    @font-face { font-family: 'PTSansBoldItalic'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS76F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS76F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS76F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS76F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS76F-webfont.svg#stv-webfont2oPncueb') format('svg'); font-weight: normal; font-style: normal; }
+    @font-face { font-family: 'PTSansBold'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS75F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS75F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS75F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS75F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS75F-webfont.svg#stv-webfontaW07W6NV') format('svg'); font-weight: normal; font-style: normal; }
+    @font-face { font-family: 'PTSansItalic'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS56F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS56F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS56F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS56F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS56F-webfont.svg#stv-webfontV5YcF68V') format('svg'); font-weight: normal; font-style: normal; }
+    @font-face { font-family: 'PTSansRegular'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS55F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS55F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS55F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS55F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTS55F-webfont.svg#stv-webfontakBUUg6U') format('svg'); font-weight: normal; font-style: normal; }
+    @font-face { font-family: 'PTSansNarrowBold'; src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN77F-webfont.eot'); src: url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN77F-webfont.eot?iefix') format('eot'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN77F-webfont.woff') format('woff'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN77F-webfont.ttf') format('truetype'), url('http://www.stevenage.gov.uk/Fonts/PT-Sans-fontfacekit/PTN77F-webfont.svg#stv-webfontSTdD4QCq') format('svg'); font-weight: normal; font-style: normal; }
 
     /*    2.stv- =BasicSetup and general styles
     --------------------------------------------------*/
@@ -23,7 +23,7 @@
     max-width: 100%;
     width: 100%;
     background-color: #fff;
-    
+
         #stv-everything {
       /*font-size: 125%;*/
       min-width: 984px;
@@ -45,7 +45,7 @@
     /*    2.stv-1.stv- =Text Elements
     --------------------------------------------------*/
     h1, h2, h3, h4, h5, h6, legend {
-      font-family: 'PTSansCaptionRegular', PT Sans Caption, Verdana, Arial, Sans-Serif; 
+      font-family: 'PTSansCaptionRegular', PT Sans Caption, Verdana, Arial, Sans-Serif;
       color: #656867;
       font-weight: normal;
       margin-top: 0;
@@ -179,7 +179,7 @@
 
     /*    2.stv-2.stv- =Table
     --------------------------------------------------*/
-    table { 
+    table {
       border: 1px solid #c0c0be;
       border-collapse: collapse;
       margin: 1em 0;
@@ -489,7 +489,7 @@
       word-spacing: 3px;
       }
 
-    /*    3.stv-3 =Pay, Apply, Report, Find links 
+    /*    3.stv-3 =Pay, Apply, Report, Find links
     --------------------------------------------------*/
     #stv-header .stv-parf {
         padding-left: 496px;
@@ -647,7 +647,7 @@
       }
 
     #stv-main.stv-home .stv-infoPanel .stv-inner,
-    #stv-main.stv-landing .stv-infoPanel .stv-inner { 
+    #stv-main.stv-landing .stv-infoPanel .stv-inner {
         position: relative;
       }
 
@@ -686,11 +686,11 @@
 
     #stv-main.stv-home .stv-infoPanel .stv-inner .stv-hidden {
       display: none;
-      } 
+      }
 
     #stv-main.stv-home .stv-infoPanel .stv-inner .stv-selected {
       display: block;
-      } 
+      }
 
     #stv-main.stv-home .stv-infoPanel .stv-inner .stv-fade,
     #stv-main.stv-landing .stv-infoPanel .stv-inner .stv-fade {
@@ -712,8 +712,8 @@
 
 
     /*    9.stv- =Layout Fixes
-      FloatHolder can be used on any div which 
-      has floated item within as oppposed to 
+      FloatHolder can be used on any div which
+      has floated item within as oppposed to
       floating the wrapper div aswell.stv-
     --------------------------------------------------*/
     .stv-floatHolder {
@@ -729,34 +729,10 @@
         visibility:hidden;
         display:block;
       }
-    
+
 }
 .ie8{
   #stv-header #stv-pageTools #stv-searchStatic{
     width: 50%;
   }
 }
-
-/*
-// Small council Header 
-body.mappage{
-  #stevenage_cc_header{
-    #stv-header .stv-parf {
-      display: none;
-    }
-    #stv-header #stv-logo{
-      position: static;
-      float: left;
-      height: auto;
-      img{
-        height:50px;
-        width: auto;
-      }
-    }
-    #stv-pageTools.stv-floatHolder{
-      position: static;
-      z-index: auto;
-    }
-  }
-}
-*/
\ No newline at end of file
diff --git a/web/cobrands/stevenage/_council_header_responsive.scss b/web/cobrands/stevenage/_council_header_responsive.scss
new file mode 100644
index 000000000..60885f65f
--- /dev/null
+++ b/web/cobrands/stevenage/_council_header_responsive.scss
@@ -0,0 +1,93 @@
+// Overrides that make the Stevenage council header
+// responsive to small screens.
+
+// Apologies in advance for the super-specific selectors.
+// They're required to override the Stevenage styles!
+
+#stevenage_cc_header {
+
+  // Make the header flexible up to 984px width.
+  .stv-inner,
+  #stv-menu #stv-primaryNavigation {
+    width: auto;
+    max-width: 984px;
+  }
+
+  // Float the search and "PARF" nav links to the right,
+  // rather than using rigid padding-left.
+  #stv-header #stv-pageTools,
+  #stv-header .stv-parf {
+    padding-left: 0;
+    float: right;
+    margin-right: 10px;
+  }
+
+  // The "PARF" links should break onto a new line after
+  // the search box, rather than floating beside it.
+  #stv-header .stv-parf {
+    clear: right;
+  }
+
+  // Clear the floated search and "PARF" elements.
+  .stv-inner {
+    @include clearfix();
+  }
+
+  // Menu items should be one sixth of menu width.
+  #stv-menu #stv-primaryNavigation {
+    background-color: #3f3f3f;
+
+    ul {
+      display: table;
+      width: 100%;
+
+      // Disable the clearfix which breaks the table layout!!
+      &:after {
+        display: none;
+      }
+    }
+
+    li {
+      display: inline;
+      display: table-cell;
+      float: none;
+      height: auto;
+
+      // IE7 doesn't support table-cell
+      .ie7 & {
+        display: inline;
+        float: left;
+        width: 16.65%;
+      }
+
+      a {
+        width: auto;
+        padding: 6px 12px;
+      }
+    }
+  }
+
+  @media (max-width: 767px) {
+    border-top: 1px solid #ccc;
+
+    .stv-inner {
+      height: 7em;
+    }
+
+    #stv-header #stv-logo {
+      width: 82px;
+      height: 45px;
+    }
+
+    #stv-header .stv-mapLogo {
+      left: 25%;
+    }
+
+    #stv-menu,
+    #stv-header #stv-pageTools,
+    #stv-header .stv-parf {
+      display: none;
+    }
+  }
+
+}
diff --git a/web/cobrands/stevenage/base.scss b/web/cobrands/stevenage/base.scss
index f17061356..ba08815ae 100644
--- a/web/cobrands/stevenage/base.scss
+++ b/web/cobrands/stevenage/base.scss
@@ -9,5 +9,44 @@ $heading-font: 'PTSansCaptionRegular', "PT Sans Caption", Verdana, Arial, sans-s
 
 @import "../sass/base";
 
+#site-header {
+    background: #eee;
+    height: 4em;
+    margin-bottom: 1em;
+
+    .container {
+      min-height: 0;
+    }
+}
+
+#site-logo {
+  background: transparent;
+  width: 82px;
+  height: 45px;
+  text-indent: 0;
+  top: 0.6em;
+  left: 0.9em;
+}
+
+#report-cta {
+  border-color: #ccc;
+  color: #000;
+  top: 2em;
+
+  &:hover, &:focus {
+    background-color: #ddd;
+  }
+}
+
+#nav-link {
+  top: 0.75em;
+}
+
 @import "council_header";
+@import "council_header_responsive";
 
+body.mappage {
+    #stevenage_cc_header {
+        display: none;
+    }
+}
diff --git a/web/cobrands/stevenage/layout.scss b/web/cobrands/stevenage/layout.scss
index 17ef6a4c3..937485c69 100644
--- a/web/cobrands/stevenage/layout.scss
+++ b/web/cobrands/stevenage/layout.scss
@@ -1,50 +1,63 @@
 @import "colours";
 @import "../sass/layout";
 
-// d523b431 - "Stevenage Home page styles"
-// 2a23e09f - Moved menu on map page and reverted to full header.
-
 // d523b431
 .nav-wrapper{
   .nav-wrapper-2{
+    position: static;
     min-height: 0;
     // e7c122a4 / 0b0a619b / - "Removed mySociety menu and positioned menu"
-    top: 9.5em;
     border-top: none;
-    padding-top: 0.75em;
+    padding-top: 0.5em;
     padding-bottom: 0.25em;
     background-color: #6b6969;
     @include background(linear-gradient(#6b6969, #555454));
+
+    .iel8 & {
+      background-color: #6b6969;
+    }
   }
 }
 
+// We use absolute positioning for the header on IE7,
+// because IE7 doesn't support the table-caption styles.
+// This means, we need to make sure page content doesn't
+// disappear behind the header.
 .ie6, .ie7 {
-    // 452ce6a0 - Added IE6/7 position change to front page header too
-    #stevenage_cc_header {
-        position:absolute;
-        top:0;
-    }
-    // 39ec0005 - Removed position static from nav in IE6/7
-    .nav-wrapper {
-        .nav-wrapper-2 {
-            position: absolute;
-        }
+    .content {
+        margin-top: 10em;
     }
 
-    .content {
-        margin-top: 7em;
+    .frontpage {
+        #front-main {
+            margin-top: 15em;
+        }
+
+        .content {
+            margin-top: 0;
+        }
     }
 }
 
-// d523b431
+#main-nav {
+    @include clearfix();
+    width: auto;
+    max-width: 984px; // match the Stevenage header width
+    float: none;
+    padding-left: 0;
+}
+
+
 .nav-menu {
     float: none;
 }
+
 .nav-menu a, .nav-menu span {
     margin: 0;
     margin-right: 2px;
     font-family: 'PTSansRegular', "PT Sans", Verdana, Arial, sans-serif;
 }
+
 .nav-menu--main {
     a, span {
         padding: 0.5em 0.75em;
@@ -64,81 +77,6 @@
     }
 }
 
-// 452ce6a0 - "Added IE6/7 position change to front page header too" -
-// turned off border for ie6-8 .content - why, as box-shadow still on?
-.iel8 {
-    .content {
-        border: none;
-    }
-}
-
-body.mappage {
-    // 15591af7 - Stevenage Map page changes
-    #stevenage_cc_header {
-        position: fixed;
-    }
-    // 2a23e09f - Moved menu on map page and reverted to full header.
-    .content {
-        margin-top: 9em;
-    }
-    // 15591af7 - Stevenage Map page changes
-    .nav-menu--main a, .nav-menu--main span {
-        padding: 0.5em 0.75em;
-    }
-    .nav-menu--main a.report-a-problem-btn {
-        padding: 0.5em 0.75em;
-        margin: 0 0 0 0.25em;
-    }
-    // 2a23e09f - Moved menu on map page and reverted to full header.
-    .nav-wrapper {
-        .nav-wrapper-2 {
-            position: absolute;
-            top: 11em;
-            bottom: auto;
-            left: 0;
-            width: 29em;
-            padding-top: 0.15em;
-            z-index: 0;
-            @include background(linear-gradient(#6b6969, #555454));
-        }
-    }
-}
-
-.ie6, .ie7 {
-    // 82d34958 - IE6/7 Positioning Tweaks on Council header
-    body.mappage {
-        // a7a564af - Stevenage IE8 position tweak
-        #stevenage_cc_header {
-            position:absolute;
-            top:0;
-        }
-        // ab958bc5 - IE6/7 Tweaks
-        .content {
-            margin-top:6em;
-        }
-        .nav-wrapper {
-            .nav-wrapper-2 {
-                position: absolute;
-            }
-        }
-    }
-}
-// a7a564a - Stevenage IE8 position tweak
-// 15591af7 - Stevenage Map page changes
-.ie8 {
-    body.mappage {
-        #stevenage_cc_header{
-            position:absolute;
-            top:0;
-        }
-        .nav-wrapper {
-            .nav-wrapper-2 {
-                position: absolute;
-            }
-        }
-    }
-}
-
 // d523b431
 body.fullwidthpage {
     .content {
@@ -176,9 +114,6 @@ body.frontpage {
     .nav-wrapper-2 {
         height: auto;
     }
-    #site-header {
-        height: auto;
-    }
     // 1162d5c8 - Changed the colour of the user text when you're logged in to be more readable
     #user-meta {
         p {
@@ -187,6 +122,10 @@ body.frontpage {
     }
 }
 
+#site-header {
+    display: none;
+}
+
 // d523b431
 #front-main {
     background: #fff;
@@ -211,25 +150,7 @@ body.frontpage {
   }
 }
 
-// 0c5d50bc - Added margin to front page report box to push below nav in IE6/7
-.ie6, .ie7 {
-    #front-main {
-        margin-top: 5.5em;
-    }
-}
-
 @media only screen and (min-width: 48em) and (max-width: 61em) {
-    // d523b431
-    #main-nav {
-        float: left;
-        padding-left: 0;
-    }
-
-    .nav-wrapper {
-        .nav-wrapper-2 {
-            @include background(linear-gradient(#222, #555 30%, #555 60%, #222));
-        }
-    }
     // f432a72d - moved sticky sidebars down a bit to account for the larger header
     body.twothirdswidthpage {
         .content {
@@ -241,3 +162,75 @@ body.frontpage {
         }
     }
 }
+
+body.mappage {
+    #site-header {
+        // We use the obscured #site-header to push the
+        // content sidebar down beyond .nav-wrapper-2
+        height: 3em;
+        display: block;
+
+        // For reasons beyond my comprehension, the 3em
+        // height results in a 3em gap in IE8. I assume
+        // some bug with table-cell / table-caption?
+        .ie8 & {
+            height: 0;
+        }
+    }
+
+    // Over-specific selector required to trump _layout.scss
+    .nav-wrapper .nav-wrapper-2 {
+        position: absolute;
+        top: 0;
+        padding: 0;
+        height: 4em;
+        background: #fff url("http://www.stevenage.gov.uk/Images/headerBG.jpg") repeat-x bottom left;
+    }
+
+    #site-logo {
+        position: absolute;
+        top: 0.5em;
+    }
+
+    #main-nav {
+        float: right;
+        margin-right: 1em;
+        margin-top: 1em;
+    }
+
+    // again, !important to override _layout.scss
+    .nav-menu--main a,
+    .nav-menu--main span,
+    .report-a-problem-btn {
+        padding: 0.5em 0.75em 0.4em 0.75em !important;
+        margin: 0 !important;
+    }
+
+    .nav-menu a {
+        color: #000;
+    }
+
+    .nav-menu a:hover,
+    .nav-menu a:focus,
+    a.report-a-problem-btn {
+        color: #fff;
+    }
+
+    // _layout.scss adds 4em of padding to leave space for
+    // an absolutely positioned menu, but I can't tell what
+    // that means. Stevenage, at least, doesn't need it.
+    .wrapper {
+        .ie7 & {
+            padding-top: 0;
+        }
+    }
+
+    // Not sure why IE7 has the old style of "inset" or "floating"
+    // sidebar on the map page, but this makes it stop!
+    .container {
+        .ie7 & {
+            margin-left: 0;
+        }
+    }
+
+}