Fix header alinment issue

alphagov · May 21, 2019 · 30fc23e · 30fc23e
1 parent 791a707
commit 30fc23e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
@@ -46,9 +46,11 @@
   }
 
   .govuk-header__logotype-crown {
+    position: relative;
+    top: -1px;
     margin-right: 1px;
     fill: currentColor;
-    vertical-align: middle;
+    vertical-align: top;
   }
 
   .govuk-header__logotype-crown-fallback-image {
@@ -101,7 +103,7 @@
 
     display: inline-block;
     font-size: 30px; // We don't have a mixin that produces 30px font size
-    line-height: 30px;
+    line-height: 1;
 
     &:link,
     &:visited {
@@ -292,18 +294,19 @@
     }
   }
 
-  // Begin adjustments for font baseline offset
-  // These should be removed when the font is updated with the correct baseline
-  .govuk-header__logotype-crown,
-  .govuk-header__logotype-crown-fallback-image {
-    position: relative;
-    top: -4px;
-  }
+  @include govuk-compatibility(govuk_template) {
+    // Begin adjustments for font baseline offset
+    // These should be removed when the font is updated with the correct baseline
+    .govuk-header__logotype-crown,
+    .govuk-header__logotype-crown-fallback-image {
+      position: relative;
+      top: -4px;
+    }
 
-  .govuk-header {
-    $offset: 3px;
-    padding-top: $offset;
+    .govuk-header {
+      $offset: 3px;
+      padding-top: $offset;
+    }
+    // End adjustments
   }
-  // End adjustments
-
 }
diff --git a/src/components/header/template.njk b/src/components/header/template.njk
@@ -22,7 +22,7 @@
             class="govuk-header__logotype-crown"
             xmlns="http://www.w3.org/2000/svg"
             viewbox="0 0 132 97"
-            height="32"
+            height="30"
             width="36"
           >
             <path