Streamline navigation menu CSS.

Reduce need for specificity. Also fix some bugs in Harrogate base menu
display, and couple of other cobrand tweaks.

35 files changed, 263 insertions, 355 deletions

diff --git a/templates/web/barnet/footer.html b/templates/web/barnet/footer.html
index 60d834d5f..e5f8739b4 100644
--- a/templates/web/barnet/footer.html
+++ b/templates/web/barnet/footer.html
@@ -8,10 +8,10 @@
         <div class="nav-wrapper">
             <div class="nav-wrapper-2">
                 <div id="main-nav" role="navigation">
-                    <ul id="mysoc-menu">
+                    <ul class="nav-menu nav-menu--mysoc">
                         <li><a href="https://www.fixmystreet.com/council">Powered by <img src="/cobrands/barnet/img/fms-logo.png" style="height:20px;"></a></li>
                     </ul>
-                    <ul id="main-menu">
+                    <ul class="nav-menu nav-menu--main">
                         <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn"
                             >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
                         %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END
diff --git a/templates/web/bromley/footer.html b/templates/web/bromley/footer.html
new file mode 100644
index 000000000..689871fff
--- /dev/null
+++ b/templates/web/bromley/footer.html
@@ -0,0 +1,37 @@
+                    [% IF pagefooter %]
+                    <footer role="contentinfo">
+                        [% INCLUDE 'front/footer-marketing.html' %]
+                    </footer>
+                    [% END %]
+                </div><!-- .content role=main -->
+            </div><!-- .container -->
+            [% IF c.cobrand.moniker == 'fixmystreet' AND bodyclass != 'mappage' %]
+                [% INCLUDE 'footer-nav.html' %]
+            [% END %]
+        </div><!-- .table-cell -->
+
+        <div class="nav-wrapper">
+            <div class="nav-wrapper-2">
+                <div id="main-nav" role="navigation">
+                    <ul class="nav-menu nav-menu--main">
+                        <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END
+                            %]>[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
+                        %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END
+                            %]>[% loc("Your reports") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[%
+                        %]<li><[% IF c.req.uri.path == '/reports' %]span[% ELSE %]a href="/reports"[% END
+                            %]>[% loc("All reports") %]</[% c.req.uri.path == '/reports' ? 'span' : 'a' %]></li>[%
+                        %]<li><[% IF c.req.uri.path == '/alert' %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END
+                            %]>[% loc("Local alerts") %]</[% c.req.uri.path == '/alert' ? 'span' : 'a' %]></li>[%
+                        %]<li><[% IF c.req.uri.path == '/faq' %]span[% ELSE %]a href="/faq"[% END
+                            %]>[% loc("Help") %]</[% c.req.uri.path == '/faq' ? 'span' : 'a' %]></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+    </div> <!-- .wrapper -->
+
+    [% TRY %][% PROCESS 'footer_extra.html' %][% CATCH file %][% END %]
+
+</body>
+</html>
diff --git a/templates/web/fiksgatami/footer.html b/templates/web/fiksgatami/footer.html
index e9fbeb716..f5088bcb4 100644
--- a/templates/web/fiksgatami/footer.html
+++ b/templates/web/fiksgatami/footer.html
@@ -10,11 +10,11 @@
         <div class="nav-wrapper">
             <div class="nav-wrapper-2">
                 <div id="main-nav" role="navigation">
-                    <ul id="mysoc-menu">
+                    <ul class="nav-menu nav-menu--mysoc">
                         <li><a href="http://www.nuug.no/">Foreningen NUUG</a></li>
                     </ul>
 
-                    <ul id="main-menu">
+                    <ul class="nav-menu nav-menu--main">
                         <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn"
                             >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
                         %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END
diff --git a/templates/web/fiksgatami/nn/footer.html b/templates/web/fiksgatami/nn/footer.html
index cfef66bc9..d7703388a 100644
--- a/templates/web/fiksgatami/nn/footer.html
+++ b/templates/web/fiksgatami/nn/footer.html
@@ -10,11 +10,11 @@
         <div class="nav-wrapper">
             <div class="nav-wrapper-2">
                 <div id="main-nav" role="navigation">
-                    <ul id="mysoc-menu">
+                    <ul class="nav-menu nav-menu--mysoc">
                         <li><a href="http://www.nuug.no/">Foreininga NUUG</a></li>
                     </ul>
 
-                    <ul id="main-menu">
+                    <ul class="nav-menu nav-menu--main">
                         <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn"
                             >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
                         %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END
diff --git a/templates/web/fixamingata/footer.html b/templates/web/fixamingata/footer.html
index c6f49cb79..376d79ff4 100644
--- a/templates/web/fixamingata/footer.html
+++ b/templates/web/fixamingata/footer.html
@@ -10,7 +10,7 @@
         <div class="nav-wrapper">
             <div class="nav-wrapper-2">
                 <div id="main-nav" role="navigation">
-                    <ul id="main-menu">
+                    <ul class="nav-menu nav-menu--main">
                         <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn"
                             >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
                         %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END
diff --git a/templates/web/fixmindelo/footer.html b/templates/web/fixmindelo/footer.html
index e11b81827..afd8984c7 100644
--- a/templates/web/fixmindelo/footer.html
+++ b/templates/web/fixmindelo/footer.html
@@ -28,11 +28,11 @@
         <div class="nav-wrapper">
             <div class="nav-wrapper-2">
                 <div id="main-nav" role="navigation">
-                    <ul id="mysoc-menu">
+                    <ul class="nav-menu nav-menu--mysoc">
                         <li><a id="mysoc-logo" href="http://www.mysociety.org/">mySociety</a></li>
                     </ul>
 
-                    <ul id="main-menu">
+                    <ul class="nav-menu nav-menu--main">
                         <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn"
                             >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
                         %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END
diff --git a/templates/web/fixmybarangay/footer.html b/templates/web/fixmybarangay/footer.html
index 5bac32e98..d1f9203f2 100644
--- a/templates/web/fixmybarangay/footer.html
+++ b/templates/web/fixmybarangay/footer.html
@@ -5,13 +5,11 @@
         <div class="nav-wrapper">
             <div class="nav-wrapper-2">
                 <div id="main-nav" role="navigation">
-                    <ul id="mysoc-menu">
-                        <li><a id="mysoc-logo" href="http://www.mysociety.org/">mySociety</a></li>[%
-                        %]<!--<li><a href="http://mysociety.org/donate/">Donate</a></li>[%
-                        %]<li><a href="http://www.mysociety.org/projects/">Our Sites</a></li>-->
+                    <ul class="nav-menu nav-menu--mysoc">
+                        <li><a id="mysoc-logo" href="http://www.mysociety.org/">mySociety</a></li>
                     </ul>
 
-                    <ul id="main-menu">
+                    <ul class="nav-menu nav-menu--main">
                         <li><a href="/around?latitude=10.322;longitude=123.907" class="fmb-bgy-btn">Luz</a></li>
                         <li><a href="/around?latitude=10.288;longitude=123.870" class="fmb-bgy-btn">BSN</a></li>
                         <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn"
diff --git a/templates/web/fixmystreet/footer.html b/templates/web/fixmystreet/footer.html
index 810708919..e087fe01f 100644
--- a/templates/web/fixmystreet/footer.html
+++ b/templates/web/fixmystreet/footer.html
@@ -13,11 +13,11 @@
         <div class="nav-wrapper">
             <div class="nav-wrapper-2">
                 <div id="main-nav" role="navigation">
-                    <ul id="mysoc-menu">
+                    <ul class="nav-menu nav-menu--mysoc">
                         <li><a id="mysoc-logo" href="https://www.mysociety.org/">mySociety</a></li>
                     </ul>
 
-                    <ul id="main-menu">
+                    <ul class="nav-menu nav-menu--main">
                         <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn"
                             >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
                         %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END
@@ -28,7 +28,7 @@
                             %]>[% loc("Local alerts") %]</[% c.req.uri.path == '/alert' ? 'span' : 'a' %]></li>[%
                         %]<li><[% IF c.req.uri.path == '/faq' %]span[% ELSE %]a href="/faq"[% END
                             %]>[% loc("Help") %]</[% c.req.uri.path == '/faq' ? 'span' : 'a' %]></li>[%
-                        %]<li id="top-nav-privacy"><[% IF c.req.uri.path == '/privacy' %]span[% ELSE %]a href="/privacy"[% END
+                        %]<li class="nav-menu__item--privacy"><[% IF c.req.uri.path == '/privacy' %]span[% ELSE %]a href="/privacy"[% END
                             %]>[% loc("Privacy") %]</[% c.req.uri.path == '/privacy' ? 'span' : 'a' %]></li>
                     </ul>
                 </div>
diff --git a/templates/web/greenwich/footer.html b/templates/web/greenwich/footer.html
index 31ab35f52..fe905acb1 100644
--- a/templates/web/greenwich/footer.html
+++ b/templates/web/greenwich/footer.html
@@ -13,11 +13,7 @@
         <div class="nav-wrapper">
             <div class="nav-wrapper-2">
                 <div id="main-nav" role="navigation">
-                    <ul id="mysoc-menu">
-                        <li><a id="mysoc-logo" href="https://www.mysociety.org/">mySociety</a></li>
-                    </ul>
-
-                    <ul id="main-menu">
+                    <ul class="nav-menu nav-menu--main">
                         <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn"
                             >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
                         %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END
@@ -28,14 +24,13 @@
                             %]>[% loc("Local alerts") %]</[% c.req.uri.path == '/alert' ? 'span' : 'a' %]></li>[%
                         %]<li><[% IF c.req.uri.path == '/faq' %]span[% ELSE %]a href="/faq"[% END
                             %]>[% loc("Help") %]</[% c.req.uri.path == '/faq' ? 'span' : 'a' %]></li>[%
-                        %]<li id="top-nav-privacy"><[% IF c.req.uri.path == '/privacy' %]span[% ELSE %]a href="/privacy"[% END
+                        %]<li class="nav-menu__item--privacy"><[% IF c.req.uri.path == '/privacy' %]span[% ELSE %]a href="/privacy"[% END
                             %]>[% loc("Privacy") %]</[% c.req.uri.path == '/privacy' ? 'span' : 'a' %]></li>
                     </ul>
                 </div>
             </div>
         </div>
 
-<!-- [% INCLUDE 'debug_footer.html' %] -->
     </div> <!-- .wrapper -->
 
     [% TRY %][% PROCESS 'footer_extra.html' %][% CATCH file %][% END %]
diff --git a/templates/web/harrogate/footer.html b/templates/web/harrogate/footer.html
index 4558b2381..f262f6156 100644
--- a/templates/web/harrogate/footer.html
+++ b/templates/web/harrogate/footer.html
@@ -14,34 +14,33 @@
             <div class="nav-wrapper-2">
                 <div id="main-nav" role="navigation">
 
-                    <ul id="main-menu">
+                    <ul class="nav-menu nav-menu--main">
                         [% selected = c.req.uri.path == '/' %]
-                        <li [% selected ? 'class="menu-item-selected"' : '' %]>
-                            <[% IF selected %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn">
+                        <li><[% IF selected %]span[% ELSE %]a href="/"[% END %]>
                             [% loc("Report a problem") %]</[% selected == '/' ? 'span' : 'a' %]></li>
 
                         [% selected = c.req.uri.path == '/my' %]
-                        <li [% selected ? 'class="menu-item-selected"' : '' %]>
+                        <li>
                             <[% IF selected %]span[% ELSE %]a href="/my"[% END %]>
                             [% loc("Your reports") %]</[% selected ? 'span' : 'a' %]></li>
 
                         [% selected = c.req.uri.path == '/reports/Harrogate' %]
-                        <li [% selected ? 'class="menu-item-selected"' : '' %]>
+                        <li>
                             <[% IF selected %]span[% ELSE %]a href="/reports"[% END %]>
                             [% loc("All reports") %]</[% selected ? 'span' : 'a' %]></li>
 
                         [% selected = c.req.uri.path == '/alert' %]
-                        <li [% selected ? 'class="menu-item-selected"' : '' %]>
+                        <li>
                             <[% IF selected %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END %]>
                             [% loc("Local alerts") %]</[% selected ? 'span' : 'a' %]></li>
 
                         [% selected = c.req.uri.path == '/faq' %]
-                        <li [% selected ? 'class="menu-item-selected"' : '' %]>
+                        <li>
                             <[% IF selected %]span[% ELSE %]a href="/faq"[% END %]>
                             [% loc("Help") %]</[% selected ? 'span' : 'a' %]></li>
 
                         [% selected = c.req.uri.path == '/privacy' %]
-                        <li id="top-nav-privacy" [% selected ? 'class="menu-item-selected"' : '' %]>
+                        <li class="nav-menu__item--privacy">
                             <[% IF selected %]span[% ELSE %]a href="/privacy"[% END %]>
                             [% loc("Privacy") %]</[% selected ? 'span' : 'a' %]></li>
                     </ul>
diff --git a/templates/web/oxfordshire/footer.html b/templates/web/oxfordshire/footer.html
index ed84c0ad6..3153125fd 100644
--- a/templates/web/oxfordshire/footer.html
+++ b/templates/web/oxfordshire/footer.html
@@ -10,11 +10,11 @@
         <div class="nav-wrapper">
             <div class="nav-wrapper-2">
                 <div id="main-nav" role="navigation">
-                    <ul id="mysoc-menu">
+                    <ul class="nav-menu nav-menu--mysoc">
                         <li><a id="mysoc-logo" href="https://www.fixmystreet.com/council">Powered by <img src="/cobrands/oxfordshire/images/fms-logo-105x20.png" alt="FixMyStreet"></a></li>
                     </ul>
 
-                    <ul id="main-menu">
+                    <ul class="nav-menu nav-menu--main">
                         <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn"
                             >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
                         %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END
diff --git a/templates/web/seesomething/footer.html b/templates/web/seesomething/footer.html
index 95297f33d..c29f222d2 100644
--- a/templates/web/seesomething/footer.html
+++ b/templates/web/seesomething/footer.html
@@ -6,7 +6,7 @@
             <div class="nav-wrapper-2">
                 <div id="main-nav" role="navigation">
 
-                    <ul id="main-menu">
+                    <ul class="nav-menu nav-menu--main">
                         <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn"
                             >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
                         %]<li><[% IF c.req.uri.path == '/faq' %]span[% ELSE %]a href="/faq"[% END
diff --git a/templates/web/stevenage/footer.html b/templates/web/stevenage/footer.html
index 454da2bd9..f9bf63fb6 100644
--- a/templates/web/stevenage/footer.html
+++ b/templates/web/stevenage/footer.html
@@ -34,7 +34,7 @@
         <div class="nav-wrapper">
             <div class="nav-wrapper-2">
                 <div id="main-nav" role="navigation">
-                    <ul id="main-menu">
+                    <ul class="nav-menu nav-menu--main">
                         <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn"
                             >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
                         %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END
diff --git a/templates/web/trinidadtobago/footer.html b/templates/web/trinidadtobago/footer.html
index 4ef368c0d..bace22e71 100644
--- a/templates/web/trinidadtobago/footer.html
+++ b/templates/web/trinidadtobago/footer.html
@@ -10,13 +10,13 @@
         <div class="nav-wrapper">
             <div class="nav-wrapper-2">
                 <div id="main-nav" role="navigation">
-                    <ul id="mysoc-menu">
+                    <ul class="nav-menu nav-menu--mysoc">
                         <li><a id="mysoc-logo" href="http://www.mysociety.org/">mySociety</a></li>[%
                         %]<li><a href="http://mysociety.org/donate/">Donate</a></li>[%
                         %]<li><a href="http://www.mysociety.org/projects/">Our Sites</a></li>
                     </ul>
 
-                    <ul id="main-menu">
+                    <ul class="nav-menu nav-menu--main">
                         <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn"
                             >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
                         %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END
diff --git a/templates/web/warwickshire/header.html b/templates/web/warwickshire/header.html
index e7b3d53a1..35baeacd7 100644
--- a/templates/web/warwickshire/header.html
+++ b/templates/web/warwickshire/header.html
@@ -195,7 +195,7 @@
                             %]>[% loc("Local alerts") %]</[% c.req.uri.path == '/alert' ? 'span' : 'a' %]></li>[%
                         %]<li><[% IF c.req.uri.path == '/faq' %]span[% ELSE %]a href="/faq"[% END
                             %]>[% loc("Help") %]</[% c.req.uri.path == '/faq' ? 'span' : 'a' %]></li>[%
-                        %]<li id="top-nav-privacy"><[% IF c.req.uri.path == '/privacy' %]span[% ELSE %]a href="/privacy"[% END
+                        %]<li class="nav-menu__item--privacy"><[% IF c.req.uri.path == '/privacy' %]span[% ELSE %]a href="/privacy"[% END
                             %]>[% loc("Privacy") %]</[% c.req.uri.path == '/privacy' ? 'span' : 'a' %]></li>
                     </ul>
                 </div>
diff --git a/templates/web/zerotb/footer.html b/templates/web/zerotb/footer.html
index c46a03878..cef009484 100644
--- a/templates/web/zerotb/footer.html
+++ b/templates/web/zerotb/footer.html
@@ -6,7 +6,7 @@
         <div class="nav-wrapper">
             <div class="nav-wrapper-2">
                 <div id="main-nav" role="navigation">
-                    <ul id="main-menu">
+                    <ul class="nav-menu nav-menu--main">
                         <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn"
                             >[% loc("Report a Stockout") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
                         %]<li><[% IF c.req.uri.path == '/faq' %]span[% ELSE %]a href="/faq"[% END
diff --git a/templates/web/zurich/footer.html b/templates/web/zurich/footer.html
index 2304c048e..f70470226 100644
--- a/templates/web/zurich/footer.html
+++ b/templates/web/zurich/footer.html
@@ -12,7 +12,7 @@
                         </p><p><a href="/admin">[% loc('Summary') %]</a> | <a href="/auth/sign_out">[% loc('sign out') %]</a>
                         </p>
                       [% END %]
-                        <ul id="main-menu" class="mob-only">
+                        <ul class="nav-menu nav-menu--main mob-only">
                             <li><[% IF c.req.uri.path == '/' %]a onclick="$('html, body').animate({scrollTop:0}, 500); return false;" href="#site-header"[% ELSE %]a href="/"[% END %]
                             >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'a' : 'a' %]></li>[%
                             %]<li><[% IF c.req.uri.path == '/reports' %]span[% ELSE %]a href="/reports"[% END
diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss
index 181eb182c..7193104f9 100644
--- a/web/cobrands/bromley/base.scss
+++ b/web/cobrands/bromley/base.scss
@@ -44,11 +44,6 @@ body.mappage {
   }
 }
 
-// Hide the mysociety menu
-#mysoc-menu {
-  display: none;
-}
-
 // Reset form placeholders so that they match Bromley's
 // input placeholders, these need to be on separate lines as if the browser
 // can't understand a selector it will invalidate the whole line.
diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss
index 55d9a7f40..4b61f8ee9 100644
--- a/web/cobrands/bromley/layout.scss
+++ b/web/cobrands/bromley/layout.scss
@@ -53,21 +53,14 @@ body.mappage {
 }
 
 // Override the FMS main menu to give it a background colour
-#main-menu {
+.nav-menu--main {
   background-color: $bromley_blue;
 }
-// Override the selected element to match. We need to do this separately
-// because of FMS's selectors being quite specific
-#main-nav ul#main-menu li span {
+.nav-menu--main span {
   color: $nav_fg;
   background-color: $nav_fg_hover;
 }
 
-// Override the "report a problem" button because it's not really a button
-#main-nav ul#main-menu li a.report-a-problem-btn {
-  color: $nav_fg;
-}
-
 // Fix bad margin on local alerts form
 body.alertindex form.full-width {
   margin-left: 0;
diff --git a/web/cobrands/fixmindelo/base.scss b/web/cobrands/fixmindelo/base.scss
index 486c66672..9a8ca9021 100644
--- a/web/cobrands/fixmindelo/base.scss
+++ b/web/cobrands/fixmindelo/base.scss
@@ -57,7 +57,7 @@ $image-sprite: 'images/sprite.png';
   }
 }
 
-#main-nav ul#mysoc-menu li a#mysoc-logo {
+#mysoc-logo {
   background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFYAAAASCAYAAADBnymNAAADAElEQVR42t2XvarWQBCGcwl7CVspFgfTiO0WdjbptdjeJrXV3kFKC4tFRAubra2CvZA7MKVwQALaKAjrG5jF4SU5CR+JyDfw4Mnfmu/J7Mxu9S8j5+xBD3T0wFUnxO3tbQAZDNW1BuR1eT38SWJ7kIX6gneuQQD2f5VqQYkBNMDJvwmYk8TWIjdc8M4BlHCX/ucOWDluQAC1uscCD1pg+dmZhXGdUIvEEk21I74/emhAmtn54bzIaIBV593MjmcMZWoEJVrgynhCTeMZdc3q6RLBALIiitCJznuRF9W5hoRnIZLYBMwOsS3IMz+e3jS/3t4LoFn4MT3gGDnrFrKRYyqy1JgcAYzlgD5Gq0ubEiuIXGICAx0bFshNQ3AiYNI/HAQSzGIt6EH6+ep+B6kZsKCBxuzlXGSBKwISyRpVPxipfPUlw7k30MeYgGGxbZnGJNEuCZNzY7mvklAfYaTpNS1kyWb9mzNVxA60wpCASI51sRM/I+9WormjxnK/SH9nDr2LFks1Mgs91U0W2+pyAIw67njqUoaUCO9cNCCBRUm/vz0wIAlcAswOsSwwgqAoEbaal2R6CQMauvcQsYZrsjq2FcXKlJwgtAVZcAtiPciCU2Ili3eJdXkztsWSSA+iLiWHiKUmNoG4d1GuOy9kWjCCHpiTMtZxxi7g9iy31KxL6u/uaLFckzPwvBRZKAuj/uEvn7wxYAQTsJXE689NAybQr2w4uh1iuRamS9axfJ36hj1ULDWxguGpIyITiFRnOxHrQJ558Sw1Nx+/JhAhNIA8Q01kos4dZOzujuYV+RkhUkNztOLoQL3UxKgkHSqWm1jcWjeurWshtQPx8YcvAVLzzPNP71tITSDQuF7kcgwrYnnty7G+nNtuYp7FehBm6HwQPO3AgmDp/o725Yv7bmJ1/w6hFgwgAcPXSVTL46qsC7yk42tCC+qNse2K+LE6IThbU3WdwcIjZevhUkfekV25VN7o9NXRwbssUFfXHdy0emDOEutBe+2Zys14a/r/AWrug1ElrRIFAAAAAElFTkSuQmCC');
   background-position: 20px center;
 }
diff --git a/web/cobrands/fixmindelo/layout.scss b/web/cobrands/fixmindelo/layout.scss
index 8dfea7acd..70e65d362 100644
--- a/web/cobrands/fixmindelo/layout.scss
+++ b/web/cobrands/fixmindelo/layout.scss
@@ -15,16 +15,8 @@ body {
   }
 }
 
-#main-nav {
-    ul {
-        &#main-menu {
-            li {
-                a.report-a-problem-btn {
-                  color: #fff;
-                }
-            }
-        }
-    }
+.nav-menu--main a.report-a-problem-btn {
+  color: #fff;
 }
 
 body.frontpage {
@@ -64,7 +56,7 @@ body.admin {
 	}
 }
 
-#main-nav ul#mysoc-menu li a#mysoc-logo {
+#mysoc-logo {
   background-position: 6px 10px;
 }
 
diff --git a/web/cobrands/fixmybarangay/base.scss b/web/cobrands/fixmybarangay/base.scss
index 81cf4785d..2f3fddaf3 100644
--- a/web/cobrands/fixmybarangay/base.scss
+++ b/web/cobrands/fixmybarangay/base.scss
@@ -26,7 +26,7 @@ input.yellow-btn{
   }
 }
 
-#main-nav ul#main-menu li a.report-a-problem-btn:hover {
+.nav-menu--main a.report-a-problem-btn:hover {
   background: #fff;
 }
 
diff --git a/web/cobrands/fixmybarangay/layout.scss b/web/cobrands/fixmybarangay/layout.scss
index 4a662754d..defe1afd0 100644
--- a/web/cobrands/fixmybarangay/layout.scss
+++ b/web/cobrands/fixmybarangay/layout.scss
@@ -44,7 +44,7 @@ body.mappage .nav-wrapper div.nav-wrapper-2 {
   border-bottom: 2px solid #333;
 }
 
-#main-nav ul#mysoc-menu li a#mysoc-logo {
+#mysoc-logo {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIkAAAAyCAMAAABf9whNAAAA0lBMVEUAAABAQEBAQEBAQEBNTU1NTU1AQEBNTU1AQEBAQEBAQEBAQEBAQEBAQEBAQEBNTU1NTU1AQEBNTU1AQEBNTU1AQEBAQEBNTU2Mxj9NTU33kx5NTU1NTU1NTU3tHCRmLZEpq+JNTU2TJ4/tHCSTJ4/87iEpq+L3kx5NTU387iH87iHtHCSTJ4/3kx51K5CTJ49mLZGMxj/tHCSx0zVmLZH6wSBmLZFmLZFDdb/zYCFbuZGMxj/3kx5AQEBNTU0pq+LtHCSMxj/3kx787iFmLZGTJ49ns3BGAAAAPXRSTlMAQL+AQIAQECBwMGBQj98gn5/Pr+/vzzC/r79wYI9wv69QcK+vcICfv68QQBAwj0AwMBBggIBQr3BwgEBgSmaQCwAAAflJREFUeF7t1Ndy2zAQhtGfAAX2IpFUseSSOLGd3nt27bT3f6UsQHusRFcKmVxkcGa4wvCG34AQ8V/wPM/zPM8zSaOaxGBHtFpF+IfikqwYO0LmELfiHH/XlLokSBrsiurtPdGkMJJFWFWTSQUZC0RhWMFNRQWuvTw9RS/VOolNEBgAudYpkE5pHqRpEACIZQ4x4RkztxMWd6KWa2DDvFDUBeg9urr6cPAZMIqEDogCmDmJKdwtlbjXOCc1sIRnhyxj0vIMNbeQMUNun5DBOTo6/3oASMhUF6krka3IM1lkikqdGaICMVE2sKSNICkR1sxYyMag5TWQd7bFPH4G8eT8zcOUKIGwJUYuSE7hzoldlZAwM7Dkwg4GQjtmXMtvBZHNiZJ7P+5C3P/2oH9SXyKXo1yJq0sbmmLMkg23h7xCryR1W5L8WqKsmz1BSbqjfNSSiMUGMEB/Bp8ePwdeLF/ZAn1TEssFR1MJIZmyGLUENXNrI8pCK6IMx99fn50tvyyBcuvEKuqKXDcuocgAQ/I7conMGgA5BfD23fvLy4/LT0Ba/v4vphRxR9dnlmIMU4ULO0IgsgPr/rya3H7F4JycoCf3sq0vW5ICiLXO3YtsMC4JqbG3uCFKMSb3nYuwNyLKMK6Q6wj7a7oMY4vwJwwG8TzP8zzP834CEcRJKkEhVogAAAAASUVORK5CYII=");
 }
 #front-main {
@@ -65,21 +65,17 @@ body.mappage .nav-wrapper div.nav-wrapper-2 {
 	}
 }
 
-#main-nav {
-    ul {
-        &#mysoc-menu {
-            padding: 1px 0.5em;
-        }
-        &#main-menu{
-          padding: 3px 0;
-        }
-        
-    }
+.nav-menu--mysoc {
+    padding: 1px 0.5em;
+}
+.nav-menu--main {
+    padding: 3px 0;
 }
-body.mappage #main-nav ul#main-menu li a, 
-body.mappage #main-nav ul#main-menu li span,
-body #main-nav ul#main-menu li a, 
-body #main-nav ul#main-menu li span
+
+body.mappage .nav-menu--main a,
+body.mappage .nav-menu--main span,
+.nav-menu--main a,
+.nav-menu--main span
 {
   color: #fff;
   padding: 0.7em;
@@ -88,7 +84,7 @@ body #main-nav ul#main-menu li span
   @include box_round(0.35em);
   margin-left: 3px;
   
-  &.report-a-problem-btn{
+  &.report-a-problem-btn {
     color: #fff;
     padding: 0.7em;
     background-color: rgba(0,0,0,0);
@@ -99,13 +95,11 @@ body #main-nav ul#main-menu li span
   &.fmb-bgy-btn {
     color: #fcc921;
   }
-  
 
-  &:hover{
+  &:hover {
     background-color: rgba(0,0,0,0.75);
     background-image: none;
   }
-  
 }
 
 
diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
index f4c6e649b..9e8bb5baf 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -70,15 +70,13 @@ h3, h4 {
 #front-main {
     background: $primary url(images/tile-y.jpg);
 }
-#main-nav {
-    ul#main-menu {
-        li {
-            a:hover {
-                @include background(linear-gradient(#000, #444 10%, #444 95%, #111));
-            }
-        }
+
+.nav-menu--main {
+    a:hover {
+        @include background(linear-gradient(#000, #444 10%, #444 95%, #111));
     }
 }
+
 .nav-wrapper {
     .nav-wrapper-2 {
         border-image-source: url(images/tile-y-border.jpg);
@@ -94,11 +92,9 @@ body.mappage {
     }
 }
 
-#main-nav {
-    ul#mysoc-menu {
-        background: #515151;
-        margin-top: -4px;
-    }
+.nav-menu--mysoc {
+    background: #515151;
+    margin-top: -4px;
 }
 
 body.twothirdswidthpage,
@@ -215,18 +211,12 @@ body.twothirdswidthpage {
       margin: 0 auto;
       background: $base_bg;
       ul {
-        list-style: none;
-        padding: 0px;
-        margin: 0px;
+        @include list-reset-soft;
         float: $left;
         li {
-          list-style: none;
           display: inline;
-          margin: 0px;
-          padding: 0px;
           float: $left;
-          a,
-          span {
+          a, span {
             display: block;
             color: $nav_fg;
             background: none;
diff --git a/web/cobrands/greenwich/base.scss b/web/cobrands/greenwich/base.scss
index e4561e338..2e886c492 100644
--- a/web/cobrands/greenwich/base.scss
+++ b/web/cobrands/greenwich/base.scss
@@ -29,11 +29,6 @@ body.frontpage #site-logo,
     background-size: cover;
 }
 
-
-#mysoc-menu {
-    display: none;
-}
-
 .issue-list-a li, .list-a li, #user-meta p, #front-main #postcodeForm {
     background: $greenwich_light_grey;
 }
diff --git a/web/cobrands/greenwich/layout.scss b/web/cobrands/greenwich/layout.scss
index 8d57949a0..df5437968 100644
--- a/web/cobrands/greenwich/layout.scss
+++ b/web/cobrands/greenwich/layout.scss
@@ -92,7 +92,7 @@ body.twothirdswidthpage #user-meta p {
     border-top: none;
 }
 
-#main-menu {
+.nav-menu--main {
     display: none;
 }
 
@@ -178,7 +178,7 @@ body.mappage {
         display: none;
     }
 
-    #main-menu {
+    .nav-menu--main {
         display: block;
     }
 
@@ -198,20 +198,15 @@ body.mappage {
         border-bottom: solid 4px $primary;
     }
 
-    #main-nav {
-        ul#main-menu {
-            li a.report-a-problem-btn {
-                color: $nav_fg;
-            }
+    .nav-menu--main a.report-a-problem-btn {
+        color: $nav_fg;
+    }
+    .nav-menu {
+        a, span {
+            color: $primary_text;
         }
-
-        ul li {
-            a, span {
-                color: $primary_text;
-            }
-            a:hover {
-                text-decoration: underline;
-            }
+        a:hover {
+            text-decoration: underline;
         }
     }
 }
diff --git a/web/cobrands/harrogate/base.scss b/web/cobrands/harrogate/base.scss
index 576b640bd..b546ae060 100644
--- a/web/cobrands/harrogate/base.scss
+++ b/web/cobrands/harrogate/base.scss
@@ -28,33 +28,17 @@ body.frontpage #site-logo,
     }
 }
 
-#main-nav ul#main-menu li {
-
+.nav-menu--main {
     // blue button background, darker if selected
-    background: #ededed;
-    &.menu-item-selected {
-        background: $primary;
-        span {
-            color: #fff;
-        }
+    a {
+        background: #ededed;
     }
-
     span {
-        color: $nav_fg;
+        color: #fff;
+        background: $primary;
     }
 }
 
-#main-nav ul#main-menu li,
-body.mappage #main-nav ul#main-menu li,
-{
-    padding-left: 0.25em;
-    padding-right: 0.25em;
-    padding-top: 0;
-    padding-bottom: 0;
-
-    a { padding: 0 }
-}
-
 label[for=form_INFO_TEXT] {
     background: yellow;
     border: solid 1px black;
diff --git a/web/cobrands/harrogate/layout.scss b/web/cobrands/harrogate/layout.scss
index dba7ed5b0..417eff539 100644
--- a/web/cobrands/harrogate/layout.scss
+++ b/web/cobrands/harrogate/layout.scss
@@ -85,38 +85,23 @@ body.twothirdswidthpage form.full-width {
     margin: 0;
 }
 
-body.mappage #main-nav {
-    ul#main-menu {
-        padding: 1em 0;
-    }
-}
 
-body.mappage #main-nav ul#main-menu li a, body.mappage #main-nav ul#main-menu li span {
-    padding: 0.75em;
+.nav-menu--main {
+    background: #ededed;
 }
 
-body.mappage #main-nav ul#main-menu li a.report-a-problem-btn,
-#main-nav ul#main-menu li a.report-a-problem-btn {
-    margin: 0;
-    padding: 0.75em;
+.nav-menu--main span {
+    color: #fff;
+    background: $primary;
 }
-#main-nav ul#main-menu li a.report-a-problem-btn {
-    &:hover {
-        background: #444;
-        color: #fff;
-        @include border-radius(0em);
-    }
+
+.nav-menu--main a, .nav-menu--main span,
+body.mappage .nav-menu--main a, body.mappage .nav-menu--main span {
+    padding: 0.75em 1.02em;
 }
 
-#main-nav {
-    ul#main-menu {
-        li {
-            a.report-a-problem-btn {
-                color: #000;
-                background: #ededed;
-            }
-        }
-    }
+body.mappage .nav-menu--main {
+    margin-top: 1em;
 }
 
 body.mappage .nav-wrapper .nav-wrapper-2 {
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index 2f297582c..8f28905e2 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -25,7 +25,7 @@
   height: 60px; // to match #site-header
 }
 
-#main-nav ul#mysoc-menu li a#mysoc-logo {
+#mysoc-logo {
   background-image: none;
   text-indent: 0;
   img {
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 15e26eddd..fe4e15bcd 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -492,48 +492,42 @@ p.label-valid {
 }
 
 
-#main-nav{
-  ul{
-    @include list-reset-soft;
-    li{
-      a, span {
-        display: block;
-        padding: 0.5em 1em;
-        background:#f6f6f6;
-        color:#333;
-        font-size: 1.25em;
-        border-bottom: 0.25em solid #333;
-      }
-      a:hover, span.hover {
-        background:  #333;
-        color:#fff;
-        text-decoration: none;
-      }
-      span {
-        background-color: #ccc;
-      }
-    }
-    &#mysoc-menu{
-      li {
-        a {
-          color: $primary_text;
-          background: $primary;
-          &#mysoc-logo {
-            background-origin: content-box;
-            background-position: $left 3px;
-            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAAYCAYAAAArrNkGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABBtJREFUaN7tmT2u1DAQx/cIPgBCQUJCICH5BuQIPkIq6hzBB0AyiAP4ABQ5ghtEm54mEtVrICUNkpmsJjBvdvyR1S7hPa2lv1aJs5PEP894xjkc/tMWY+xADhRQA8iC9I7PtD6PP9xa9aC1oCnmm9lpgtHW3WiVB03HuqYeA9DlPZbJuXj8o5wgGM5os+ixLb74MeTt+Hz+kiGXva99jEDjJV7w+5Pn3aIHNoEvB/Tu7s6iejzuQAEUQRPIgxT2KTwesX+5rkvYs7yP2KDXLN7XXCKkAUgHiii3MaQuideI9x/x2GB/gxFjVZMIoY6AmtBGJ+QJluUKgdheI1LpfveuoQMciTw7XrUAbEFzot8Re4GcnwWghv23Ezx0PiejBYiBAA0/Pz7VoOV3AKnEup1LwhyBQFsr2Jkzdjy51hZyBIuwaOuFZ6fPPaaA5jQX+hvi4fS8YUC9BBzXqJOB4INXAGpAM8oAxBEUUbYSQiCD1ZWACnZGhDJIUacGaBbY34ghAxfAdHheCxBHAs6yvp7YpP/zDOgk9WHIGhMvOZ5TrjCgfUUSptigqQqg1M7A7kHhTVvWUAF8Q/r6ZObPQy4bfMf62wycoeSFOEmoPS2sQ74mdFUC1RhuHQ25QonkKurjE6CCpzTC+9CmNwBNeiHz/oGvabnweG+9E9ZDul6GDDiD53tybsoMYIMJhhQSjy/28YVzoAgKoGRt+uvHMwUaQRHkS7N/I1AjhGuuGs+2ifsOPOwKk6TLAeUe2J4DFPtG7vnsnK3MQPngTwg0ErUZoC3CPEqyWbmDJQG1cVvbCpRPmIadm6Wy5VpAeXKkpCRqQ1F/DwBAnAlQnQHaEKDzlYGGgvQWoEJy1LOx8P8SqOLJEU2uNhbhvQC0AVn76n3/9vWHpIe++/Km/fxVL17aL3ATSYU5E2h77rbkBqA2kYFHsbS7FlAhOTrJpIXwkirYRynMAEgDiignwHSgiGozCceUg5EBqs5N2hhQX8gnpDaldoquCVQn6lmV2foLbJdkSmWkANESoNPLT98UyKMUgbnIFsqWGRMxQ0JbW1G2eCHsdmQferWlMwlPxHuLnwiFa9NefU2gQiJ0UholBixm6lGV8lAEGVFDykMr6l5e5OeA1tg5ASB8wcmVMEa4rtkLqM3VnqQuDJnBmHnhT6A2oKPNBSIFuq6hoCbzCatY91Zs/ZXspED5Ws+rDu0IbZUSEps//YmQuvbrCg8NFd8I1zBl8bd66w8galBA6Q3rmWKb3YZlpIqE0Da13pLrVjtd6flxMtP7qorvse1hjyYkRfs8yMP/8E83WMIeII2wdrobnk0gG6HOnUu7WteAqRKf39QN0yagTlhf9/lwz9fNG8yzgBrmmWa3h8Ftv0HaQLi1TYlaSGX3UvsNzdBKw+waoEEAAAAASUVORK5CYII=');
-            background-repeat:no-repeat;
-            text-indent:-999999px;
-          }
-        }
-      }
-    }
+.nav-menu {
+  @include list-reset-soft;
+  a, span {
+    display: block;
+    padding: 0.5em 1em;
+    background: #f6f6f6;
+    color: #333;
+    font-size: 1.25em;
+    border-bottom: 0.25em solid #333;
+  }
+  a:hover, span.hover {
+    background: #333;
+    color: #fff;
+    text-decoration: none;
+  }
+  span {
+    background: #ccc;
   }
 }
-.ie6 #main-nav ul#mysoc-menu li a#mysoc-logo {
+.nav-menu--mysoc {
+  a {
+    color: $primary_text;
+    background: $primary;
+  }
+}
+#mysoc-logo {
+  background-origin: content-box;
+  background-position: $left 3px;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAAYCAYAAAArrNkGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABBtJREFUaN7tmT2u1DAQx/cIPgBCQUJCICH5BuQIPkIq6hzBB0AyiAP4ABQ5ghtEm54mEtVrICUNkpmsJjBvdvyR1S7hPa2lv1aJs5PEP894xjkc/tMWY+xADhRQA8iC9I7PtD6PP9xa9aC1oCnmm9lpgtHW3WiVB03HuqYeA9DlPZbJuXj8o5wgGM5os+ixLb74MeTt+Hz+kiGXva99jEDjJV7w+5Pn3aIHNoEvB/Tu7s6iejzuQAEUQRPIgxT2KTwesX+5rkvYs7yP2KDXLN7XXCKkAUgHiii3MaQuideI9x/x2GB/gxFjVZMIoY6AmtBGJ+QJluUKgdheI1LpfveuoQMciTw7XrUAbEFzot8Re4GcnwWghv23Ezx0PiejBYiBAA0/Pz7VoOV3AKnEup1LwhyBQFsr2Jkzdjy51hZyBIuwaOuFZ6fPPaaA5jQX+hvi4fS8YUC9BBzXqJOB4INXAGpAM8oAxBEUUbYSQiCD1ZWACnZGhDJIUacGaBbY34ghAxfAdHheCxBHAs6yvp7YpP/zDOgk9WHIGhMvOZ5TrjCgfUUSptigqQqg1M7A7kHhTVvWUAF8Q/r6ZObPQy4bfMf62wycoeSFOEmoPS2sQ74mdFUC1RhuHQ25QonkKurjE6CCpzTC+9CmNwBNeiHz/oGvabnweG+9E9ZDul6GDDiD53tybsoMYIMJhhQSjy/28YVzoAgKoGRt+uvHMwUaQRHkS7N/I1AjhGuuGs+2ifsOPOwKk6TLAeUe2J4DFPtG7vnsnK3MQPngTwg0ErUZoC3CPEqyWbmDJQG1cVvbCpRPmIadm6Wy5VpAeXKkpCRqQ1F/DwBAnAlQnQHaEKDzlYGGgvQWoEJy1LOx8P8SqOLJEU2uNhbhvQC0AVn76n3/9vWHpIe++/Km/fxVL17aL3ATSYU5E2h77rbkBqA2kYFHsbS7FlAhOTrJpIXwkirYRynMAEgDiignwHSgiGozCceUg5EBqs5N2hhQX8gnpDaldoquCVQn6lmV2foLbJdkSmWkANESoNPLT98UyKMUgbnIFsqWGRMxQ0JbW1G2eCHsdmQferWlMwlPxHuLnwiFa9NefU2gQiJ0UholBixm6lGV8lAEGVFDykMr6l5e5OeA1tg5ASB8wcmVMEa4rtkLqM3VnqQuDJnBmHnhT6A2oKPNBSIFuq6hoCbzCatY91Zs/ZXspED5Ws+rDu0IbZUSEps//YmQuvbrCg8NFd8I1zBl8bd66w8galBA6Q3rmWKb3YZlpIqE0Da13pLrVjtd6flxMtP7qorvse1hjyYkRfs8yMP/8E83WMIeII2wdrobnk0gG6HOnUu7WteAqRKf39QN0yagTlhf9/lwz9fNG8yzgBrmmWa3h8Ftv0HaQLi1TYlaSGX3UvsNzdBKw+waoEEAAAAASUVORK5CYII=');
+  background-repeat: no-repeat;
+  text-indent: -999999px;
+}
+.ie6 #mysoc-logo {
   background: url('/cobrands/fixmystreet/images/ie_mysoc_logo.gif') center no-repeat;
 }
-.ie7 #main-nav ul#mysoc-menu li a#mysoc-logo {
+.ie7 #mysoc-logo {
   background: url($image-sprite) -240px -38px no-repeat;
 }
 
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index cc4cfadf2..806f1408c 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -128,90 +128,80 @@ h1 {
     display: none;
 }
 
-#main-nav{
+#main-nav {
   margin: 0 auto;
-  padding: 0em;
+  padding: 0;
   width: 60em;
-  ul{
-    list-style: none;
-    padding: 0px;
-    margin: 0px;
-    float: $right;
-    li{
-      list-style: none;
-      display: inline;
-      margin: 0px;
-      padding: 0px;
-      float: $left;
-      a,
-      span {
-        display: block;
-        color: $nav_fg;
-        background: none;
-        border-bottom: none;
-      }
-      &#top-nav-privacy {
-        display: none;
-      }
-    }
-    &#main-menu{
-      li{
-        a, span{
-          padding: 0.75em;
-          font-size: 0.9em;
-        }
-        a:hover{
-          background: $nav_fg_hover;
-        }
-        a.report-a-problem-btn {
-          color: $primary_text;
-          background: $primary;
-          padding:0.25em;
-          margin:0.5em;
-          @include border-radius(0.25em);
-          &:hover {
-            background:$primary/1.1;
-          }
-        }
-        span {
-          color:$primary;
-        }
-      }
+}
+.nav-menu {
+  float: $right;
+  li {
+    display: inline;
+    float: $left;
+  }
+  li.nav-menu__item--privacy {
+    display: none;
+  }
+  a, span {
+    display: block;
+    color: $nav_fg;
+    background: none;
+    border-bottom: none;
+  }
+}
+.nav-menu--main {
+  a, span {
+    padding: 0.75em;
+    font-size: 0.9em;
+  }
+  a:hover {
+    background: $nav_fg_hover;
+  }
+  a.report-a-problem-btn {
+    color: $primary_text;
+    background: $primary;
+    padding:0.25em;
+    margin:0.5em;
+    @include border-radius(0.25em);
+    &:hover {
+      background:$primary/1.1;
     }
-    &#mysoc-menu{
-      padding: 0em 0.5em;
-      margin-#{$left}: 0.25em;
-      background: $primary;
-      @include border-radius(0 0 0.375em 0.375em);
-      li{
-        a{
-          background:none;
-          color: $primary_text;
-          text-transform: uppercase;
-          font-size: 0.6875em;
-          padding: 1.3em 0.7em 1em;
-          &#mysoc-logo {
-            width:84px;
-            height:16px;
-            background-size: 100px auto;
-            background-position: -8px 0px;
-            opacity: 0.8;
-            &:hover {
-              opacity: 1;
-            }
-          }
-          &:hover{
-            color:#fff;
-          }
-        }
-      }
+  }
+  span {
+    color:$primary;
+  }
+}
+.nav-menu--mysoc {
+  padding: 0em 0.5em;
+  margin-#{$left}: 0.25em;
+  background: $primary;
+  @include border-radius(0 0 0.375em 0.375em);
+  a {
+    background:none;
+    color: $primary_text;
+    text-transform: uppercase;
+    font-size: 0.6875em;
+    padding: 1.3em 0.7em 1em;
+    &:hover {
+      color: #fff;
+      background: none;
     }
   }
 }
-.ie8 #main-nav ul#mysoc-menu li a#mysoc-logo {
+#mysoc-logo {
+  width:84px;
+  height:16px;
+  background-size: 100px auto;
+  background-position: -8px 0px;
+  opacity: 0.8;
+  &:hover {
+    opacity: 1;
+  }
+}
+.ie8 #mysoc-logo {
   width: 100px;
 }
-.ie7 #main-nav ul#mysoc-menu li a#mysoc-logo {
+.ie7 #mysoc-logo {
     background-position: -260px -43px;
 }
 
@@ -256,12 +246,11 @@ body.mappage {
     margin-#{$right}: 1em;
   }
 
-  #main-nav ul#main-menu li a,
-  #main-nav ul#main-menu li span {
+  .nav-menu--main a, .nav-menu--main span {
     padding: 1.4em 0.75em 1.35em;
   }
 
-  #main-nav ul#main-menu li a.report-a-problem-btn {
+  .nav-menu--main a.report-a-problem-btn {
     padding: 0.5em;
     margin: 0.9em 0.25em 0.85em;
   }
@@ -1133,7 +1122,7 @@ body.frontpage {
     padding-#{$left}: 180px;
   }
 
-  html #main-nav ul#mysoc-menu li a#mysoc-logo {
+  #mysoc-logo {
     width: 16px;
     // Just the mySociety circle logo
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABJ9JREFUeNqsVXlMHFUYf/Pe7O7M7E2Xw6UFWg5LQ1GTosa0IT00wYbGaKoltWnaRGNrjIptiUalXqlJU9RU0fSPHtqCR20pliBpQpAmxQgoLDeLQIEuh2WBndmDnZn3fMvRsqEGVv0mv3lzvPd97/u97wBgmXLUbHvOFZ/cJK1KbTtmiX4F/J+ySzBuDiakeSdWphA3RSAhTX3NaN2znLVwyQkMA/YbzAcwAAIFIBSYELjPYH6Zpf9CwrEMeGS1zhalh2zEBkIq2NCdkDvfyOxCRqHfnnpIWN9caK+5URDX2VJob8zfZsqJyIBKlVzweU7pIMIC3TFHIUAISkSx2GKE2uK8qNK0ODZbVsgKuwllnthp/S4rUZs0vx4th0dHcLp3FCv1VogEL8G9Jz2THx4Tx79+Yh23/oVs4zuBwKx3CuWQ5aHO5VYba7oDDjDj/TJEpSgWJytD0FAP5Dm6PD4ySZmSIUM0+C6DoGdUdkXkwULBC56HJtRJuxFpsu7nsll60CwHQY3D/8PRq1NFQZXg+TP8TwKphhc3GXPS4zWP9tySm07XSZe9MgkLEpCuX5uZZdqQBwEM1nsaStq87V3/xtjGTVzKB29bj0RZkK2s3PvTJ59PnWG2Rm3esTP2mW80gDUByq+CFffJoS+2tkrtTZEoz80R1pVfjrsBEGMGCvWAQ+DsV5MFcLstp0jFqsmH/cCn+qjLMGqLdcvrcOkIDpO9eYY9QMuYVRED1U8A8Sjg6Vz9AahH+mi84OhCzwISbAwT8fFoFr6EjlgvMAh2eDtP85AP7XwGHORAi9R6USVqRNrPlUqlIEgCSM8ApGMAtCBw/nvpLGqR2qoFxIMYbUwCJvh2tbv6oyt/lX8Z6fa7e+Thdsd0bdpa7QqvF49UlPmKXz0y/vEdHqyshaeDH2lNNoPGmhlUfQMuydmzHOX2VENMTKKQ0OMQu6Qxv8hqaLDMhWoY0VlxuXkPx24vZhhooa/elts1hddvfXsCE/yPyrftTdj15ME1n3J6FOsTlbFrZwbeqDrVdz4sD0Ji41fan019q1MF2Ego/wy9NIjDl5zHM1xeZ8e9lMenGuIPl2zoIIAxqjIGiO4cIeg/vrs+fbBDvBlWi3RISKF5YCQYz5XkGRchx+rT6djBpzyYaM3Zl0ftaqd++fGSt7m2NTqBT9dwyOgXldmaRWnRcgyflGnKWGTAr0hOTFQPjSQTHWciihCCJd9IM/fAxuTV712shTreHppreXz3of739+dMDFW1E0wUBjIsHQGt4gDT8BtsF52L+oE74BquH7l6kFIzoYE6agBJv49V5o/JI39G5750mNFydlWaAiHQOca45/Pfvdk17bp2ur+AM6CAYGKBlkdyQ+Xom4OdYve83rBy3Tj284U+T/N1njUmBVTf0Lh/qBdABDQ2+31Elu8mkaoAyAsxgHbIK5/1FnX9NlmVmGFa0/vHVL+zYaJloc5F/cAdGB4AIIT51FaBWFdRps94bIciB2ZaJ+T1wNf2azmYS8bOOndbCPcKhGX1g0BfqwPpzUS3Ki0ZanVeT13FuZHiQ4UkOK0stfZvAQYA/wr53nPx8cUAAAAASUVORK5CYII=);
diff --git a/web/cobrands/stevenage/layout.scss b/web/cobrands/stevenage/layout.scss
index eb62cf7c4..49529dd49 100644
--- a/web/cobrands/stevenage/layout.scss
+++ b/web/cobrands/stevenage/layout.scss
@@ -40,33 +40,29 @@
 #main-nav {
     ul {
         float: none;
-        li {
-            a, span {
-                margin: 0;
-                margin-right: 2px;
-                font-family: 'PTSansRegular', "PT Sans", Verdana, Arial, sans-serif;
-            }
-        }
-        &#main-menu {
-            li {
-                a, span {
-                    padding: 0.5em 0.75em;
-                    font-size: 0.8em;
-                    margin: 0;
-                    @include border-radius(0.25em);
-                }
-                a.report-a-problem-btn {
-                    padding:0.5em 0.75em;
-                    margin:0;
-                    margin-left: 0.25em;
-                    color:#fff;
-                }
-                span {
-                    color: #fff;
-                    background-color: #066539;
-                }
-            }
-        }
+    }
+}
+.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;
+        font-size: 0.8em;
+        margin: 0;
+        @include border-radius(0.25em);
+    }
+    a.report-a-problem-btn {
+        padding:0.5em 0.75em;
+        margin:0;
+        margin-left: 0.25em;
+        color:#fff;
+    }
+    span {
+        color: #fff;
+        background-color: #066539;
     }
 }
 
@@ -88,10 +84,10 @@ body.mappage {
         margin-top: 9em;
     }
     // 15591af7 - Stevenage Map page changes
-    #main-nav ul#main-menu li a, #main-nav ul#main-menu li span {
+    .nav-menu--main a, .nav-menu--main span {
         padding: 0.5em 0.75em;
     }
-    #main-nav ul#main-menu li a.report-a-problem-btn {
+    .nav-menu--main a.report-a-problem-btn {
         padding: 0.5em 0.75em;
         margin: 0 0 0 0.25em;
     }
diff --git a/web/cobrands/zerotb/layout.scss b/web/cobrands/zerotb/layout.scss
index ea8102ded..c8afa3abc 100644
--- a/web/cobrands/zerotb/layout.scss
+++ b/web/cobrands/zerotb/layout.scss
@@ -31,16 +31,10 @@ body {
         }
     }
     &.mappage {
-        #main-nav {
-            ul#main-menu {
-                li {
-                    a,
-                    a.report-a-problem-btn,
-                    span {
-                        padding: 0.25em;
-                        margin: 0.5em;
-                    }
-                }
+        .nav-menu--main {
+            a, a.report-a-problem-btn, span {
+                padding: 0.25em;
+                margin: 0.5em;
             }
         }
         .nav-wrapper-2 {
@@ -56,21 +50,11 @@ body {
     }
 }
 
-#main-nav {
-    ul#mysoc-menu {
-        li {
-            a {
-                color: $primary_text;
-            }
-        }
-    }
-    ul#main-menu {
-        li {
-            span {
-                color: $primary_text;
-            }
-        }
-    }
+.nav-menu--mysoc a {
+    color: $primary_text;
+}
+.nav-menu--main span {
+    color: $primary_text;
 }
 
 #site-header {
diff --git a/web/cobrands/zurich/layout.scss b/web/cobrands/zurich/layout.scss
index f25870a48..d22d753ca 100644
--- a/web/cobrands/zurich/layout.scss
+++ b/web/cobrands/zurich/layout.scss
@@ -187,13 +187,6 @@ body.mappage {
 }
 
 body.mappage {
-    #main-nav {
-        width: auto;
-    }
-    #main-nav ul#main-menu li a,
-    #main-nav ul#main-menu li span {
-        padding: 0.75em;
-    }
     #zurich-footer {
         display: none;
     }
diff --git a/web/down.default.html b/web/down.default.html
index a4f58e15a..d3403d76c 100644
--- a/web/down.default.html
+++ b/web/down.default.html
@@ -90,7 +90,7 @@
         <div class="nav-wrapper">
             <div class="nav-wrapper-2">
                 <div id="main-nav" role="navigation">
-                    <ul id="mysoc-menu">
+                    <ul class="nav-menu nav-menu--mysoc">
                         <li><a id="mysoc-logo" href="https://www.mysociety.org/">mySociety</a></li>
                     </ul>
                 </div>