Use dedicated styles for each navigation component

app/frontend/styles/_primary-navigation.scss

@@ -1,20 +1,14 @@
-.app-primary-navigation,
-.app-sub-navigation {
-  @include govuk-font(19, $weight: bold);
-  border-bottom: 1px solid $govuk-border-colour;
-}
-
 .app-primary-navigation {
+  @include govuk-font(19, $weight: bold);
   background-color: govuk-colour("light-grey");
+  border-bottom: 1px solid $govuk-border-colour;
 }
 
-.govuk-phase-banner + .app-primary-navigation,
-.app-sub-navigation {
+.govuk-phase-banner + .app-primary-navigation {
   margin-top: -1px;
 }
 
-.app-primary-navigation__list,
-.app-sub-navigation__list {
+.app-primary-navigation__list {
   @include govuk-clearfix;
   left: govuk-spacing(-3);
   list-style: none;
@@ -25,8 +19,7 @@
   width: calc(100% + #{govuk-spacing(6)});
 }
 
-.app-primary-navigation__item,
-.app-sub-navigation__item {
+.app-primary-navigation__item {
   box-sizing: border-box;
   display: block;
   float: left;
@@ -36,8 +29,7 @@
   position: relative;
 }
 
-.app-primary-navigation__item--current,
-.app-sub-navigation__item--current {
+.app-primary-navigation__item--current {
   border-bottom: $govuk-border-width-narrow solid $govuk-link-colour;
 
   &:hover {
@@ -49,15 +41,13 @@
   }
 }
 
-.app-primary-navigation__item--align-right,
-.app-sub-navigation__item--align-right {
+.app-primary-navigation__item--align-right {
   @include govuk-media-query($from: tablet) {
     float: right;
   }
 }
 
-.app-primary-navigation__link,
-.app-sub-navigation__link {
+.app-primary-navigation__link {
   @include govuk-link-common;
   @include govuk-link-style-no-visited-state;
   @include govuk-link-style-no-underline;
@@ -74,7 +64,6 @@
   }
 }
 
-.app-primary-navigation__item--current .app-primary-navigation__link:hover,
-.app-sub-navigation__item--current .app-sub-navigation__link:hover {
+.app-primary-navigation__item--current .app-primary-navigation__link:hover {
   text-decoration: none;
 }

app/frontend/styles/_sub-navigation.scss

@@ -0,0 +1,80 @@
+.app-sub-navigation {
+  @include govuk-font(19, $weight: bold);
+  @include govuk-responsive-margin(6, "bottom");
+}
+
+.app-sub-navigation__list {
+  @include govuk-clearfix;
+  left: govuk-spacing(-3);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  right: govuk-spacing(-3);
+  width: calc(100% + #{govuk-spacing(6)});
+
+  @include govuk-media-query($from: tablet) {
+    box-shadow: inset 0 -1px 0 $govuk-border-colour;
+  }
+}
+
+.app-sub-navigation__item {
+  box-sizing: border-box;
+  display: block;
+  line-height: 40px;
+  height: 40px;
+  padding: 0 govuk-spacing(3);
+
+  @include govuk-media-query($from: tablet) {
+    box-shadow: none;
+    display: block;
+    float: left;
+    line-height: 50px;
+    height: 50px;
+    padding: 0 govuk-spacing(3);
+    position: relative;
+  }
+}
+
+.app-sub-navigation__item--current {
+  @include govuk-media-query($until: tablet) {
+    border-left: $govuk-border-width-narrow solid $govuk-link-colour;
+    padding-left: 11px;
+  }
+
+  @include govuk-media-query($from: tablet) {
+    border-bottom: $govuk-border-width-narrow solid $govuk-link-colour;
+    padding-left: govuk-spacing(3);
+  }
+
+  &:hover {
+    border-color: $govuk-link-hover-colour;
+  }
+
+  &:active {
+    border-color: $govuk-link-active-colour;
+  }
+}
+
+.app-sub-navigation__link {
+  @include govuk-link-common;
+  @include govuk-link-style-no-visited-state;
+  @include govuk-link-style-no-underline;
+  @include govuk-typography-weight-bold;
+
+  // Extend the touch area of the link to the list
+  &:after {
+    bottom: 0;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+.app-sub-navigation__item--current .app-sub-navigation__link {
+  &:hover {
+    text-decoration: none;
+  }
+}

app/frontend/styles/application.scss

@@ -40,6 +40,7 @@ $govuk-breakpoints: (
 @import "panel";
 @import "primary-navigation";
 @import "search";
+@import "sub-navigation";
 
 // App utilities
 .app-\!-colour-muted {