Merge pull request #2282 from alphagov/fix-nav-header-hovers

Fix inconsistent navigation header hover states
alphagov · Aug 24, 2021 · 7254544 · 7254544
2 parents 6cbdc69 + 1cd99a5
commit 7254544
Showing 1 changed file with 17 additions and 12 deletions.
diff --git a/...s/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss b/...s/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
@@ -269,7 +269,11 @@ $search-icon-size: 20px;
     color: $govuk-link-colour;
 
     &:hover {
-      color: govuk-colour("mid-grey");
+      color: $govuk-link-hover-colour;
+
+      @include govuk-media-query($from: "desktop") {
+        color: govuk-colour("mid-grey");
+      }
     }
 
     &:focus {
@@ -358,6 +362,10 @@ $search-icon-size: 20px;
   position: absolute;
   right: 45px;
 
+  &.gem-c-layout-super-navigation-header__open-button {
+    border-top-color: govuk-colour("black");
+  }
+
   @include govuk-media-query($from: 360px) {
     &:before {
       @include chevron("white");
@@ -388,14 +396,18 @@ $search-icon-size: 20px;
   position: absolute;
   right: (0 - govuk-spacing(3));
 
-  &:hover {
-    border-color: govuk-colour("black");
+  &.gem-c-layout-super-navigation-header__open-button {
+    border-top-color: govuk-colour("black");
   }
 
   @include govuk-media-query($from: 360px) {
     right: 0;
   }
 
+  &:focus:hover {
+    border-top-color: govuk-colour("black");
+  }
+
   @include govuk-media-query($from: "desktop") {
     background-color: $govuk-link-colour;
     border-left: 0;
@@ -406,8 +418,8 @@ $search-icon-size: 20px;
     float: right;
 
     &:not(.gem-c-layout-super-navigation-header__open-button):hover {
-      background: none;
-      color: govuk-colour("light-grey");
+      background: govuk-colour("black");
+      color: govuk-colour("mid-grey");
 
       &:after {
         content: " ";
@@ -422,8 +434,6 @@ $search-icon-size: 20px;
     }
 
     &.gem-c-layout-super-navigation-header__open-button {
-      border-top-color: govuk-colour("black");
-
       &:hover:after {
         content: " ";
       }
@@ -486,7 +496,6 @@ $search-icon-size: 20px;
 
     &:focus {
       color: $govuk-focus-text-colour;
-      // border-color: $govuk-focus-text-colour;
 
       &:after {
         background-color: $govuk-focus-text-colour;
@@ -501,10 +510,6 @@ $search-icon-size: 20px;
   &.gem-c-layout-super-navigation-header__open-button {
     border-top-color: govuk-colour("black");
 
-    &:focus {
-      border-top-color: $govuk-focus-colour;
-    }
-
     &:before {
       transform: translateY(20%) rotate(225deg);
     }