Merge pull request #926 from alphagov/header-logo-underline-on-hover

Only underline logo on hover (with custom colours)
alphagov · Jul 24, 2018 · 8d3f5c1 · 8d3f5c1
2 parents e41a9b3 + 6ce51bf
commit 8d3f5c1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -30,6 +30,10 @@
   can now be overwritten by setting the `assetUrl` variable.
   ([PR #847](https://github.com/alphagov/govuk-frontend/pull/847))
 
+- Only underline the logo in the header on underline when users have overridden
+  colours in their browser, rather than it appearing underlined all the time
+  ([PR #926](https://github.com/alphagov/govuk-frontend/pull/926))
+
 🔧 Fixes:
 
 - Replace conflicting `js-hidden` class used within the tabs component with a new modifier class.

diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
@@ -101,14 +101,16 @@
 
     &:link,
     &:visited {
-      margin-bottom: -1px; // Negate transparent bottom border
-      border-bottom: 1px solid transparent;
       text-decoration: none;
     }
 
     &:hover,
     &:active {
-      border-bottom-color: currentColor;
+      // Negate the added border
+      margin-bottom: -1px;
+      // Omitting colour will use default value of currentColor – if we
+      // specified currentColor explicitly IE8 would ignore this rule.
+      border-bottom: 1px solid;
     }
   }