Style subnav

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;
 }
 

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;
+  }
 }

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>