From 16600cec21774cf793e07b2a3954a052d68f3d5f Mon Sep 17 00:00:00 2001
From: alex-ju <alex-ju@users.noreply.github.com>
Date: Thu, 4 Jan 2018 16:19:39 +0000
Subject: [PATCH] Style side navigation

---
 src/stylesheets/components/_mobile-navigation.scss |  2 +-
 src/stylesheets/components/_subnav.scss            | 11 +++++++++--
 views/partials/_subnav.njk                         |  7 +++----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/stylesheets/components/_mobile-navigation.scss b/src/stylesheets/components/_mobile-navigation.scss
index a307f16c83..69e539e5d2 100644
--- a/src/stylesheets/components/_mobile-navigation.scss
+++ b/src/stylesheets/components/_mobile-navigation.scss
@@ -79,7 +79,7 @@
   margin: 0;
   padding: $govuk-spacing-scale-4 $govuk-spacing-scale-4 $govuk-spacing-scale-1 $govuk-spacing-scale-4;
   color: $govuk-grey-1;
-  @include govuk-font-regular-19;
+  @include govuk-font-bold-19;
   text-transform: uppercase;
 }
 
diff --git a/src/stylesheets/components/_subnav.scss b/src/stylesheets/components/_subnav.scss
index cd071b900b..74dfc2ac22 100644
--- a/src/stylesheets/components/_subnav.scss
+++ b/src/stylesheets/components/_subnav.scss
@@ -1,12 +1,12 @@
 @include exports("subnav") {
 
   .app-c-subnav {
-    padding: 0 $govuk-spacing-scale-3;
+    padding: $govuk-spacing-scale-3;
     @include govuk-font-regular-16;
   }
 
   .app-c-subnav__section {
-    margin: $govuk-spacing-scale-3 0;
+    margin: 0 0 $govuk-spacing-scale-4;
     padding: 0;
     list-style-type: none;
 
@@ -36,4 +36,11 @@
     }
   }
 
+  .app-c-subnav__theme {
+    margin: 0;
+    padding: $govuk-spacing-scale-2 $govuk-spacing-scale-3;
+    color: $govuk-grey-1;
+    @include govuk-font-bold-16;
+    text-transform: uppercase;
+  }
 }
diff --git a/views/partials/_subnav.njk b/views/partials/_subnav.njk
index bbf80462dd..b2f03203df 100644
--- a/views/partials/_subnav.njk
+++ b/views/partials/_subnav.njk
@@ -1,21 +1,20 @@
 <nav class="app-c-subnav">
-  <ul class="app-c-subnav__section">
-
     {% for item in navigation %}
       {% if item.url in path %}
       {% if item.items %}
         {% for theme, items in item.items | groupby("theme") %}
           {% if theme != 'undefined' %}
-            <h4 class="govuk-caption-m">{{ theme }}</h4>
+            <h4 class="app-c-subnav__theme">{{ theme }}</h4>
           {% endif %}
+          <ul class="app-c-subnav__section">
           {% for subitem in items %}
             <li class="app-c-subnav__section-item{% if subitem.url == path %} app-c-subnav__section-item--current{% endif %}">
               <a href="/{{ subitem.url }}">{{ subitem.label }}</a>
             </li>
           {% endfor %}
+          </ul>
         {% endfor %}
       {% endif %}
       {% endif %}
     {% endfor %}
-  </ul>
 </nav>