Merge pull request #4150 from alphagov/header-menu-button-position-re…

…factor

Header menu button position refactor

CHANGELOG.md

@@ -31,6 +31,7 @@ This change was introduced in [pull request #4291: Rename `govuk-typography-resp
 We've made fixes to GOV.UK Frontend in the following pull requests:
 
 - [#4157: Dynamically position text within input prefixes and suffixes](https://github.com/alphagov/govuk-frontend/pull/4157)
+- [#4150: Header menu button position refactor](https://github.com/alphagov/govuk-frontend/pull/4150)
 
 ## 5.0.0 (Breaking release)
 

packages/govuk-frontend/src/govuk/components/header/_index.scss

@@ -6,6 +6,12 @@
   $govuk-header-link-active: #1d8feb;
   $govuk-header-nav-item-border-color: #2e3133;
   $govuk-header-link-underline-thickness: 3px;
+  $govuk-header-vertical-spacing-value: 2;
+  // This crown height is only used to calculate top offset of mobile menu button
+  // as the crown svg height is the only thing that controls the height of the header
+  $govuk-header-crown-height: 30px;
+  $govuk-header-menu-button-height: 24px;
+  $govuk-header-menu-button-width: 80px;
 
   .govuk-header {
     @include govuk-font($size: 16, $line-height: 1);
@@ -28,7 +34,7 @@
     @include govuk-clearfix;
     position: relative;
     margin-bottom: -$govuk-header-border-width;
-    padding-top: govuk-spacing(2);
+    padding-top: govuk-spacing($govuk-header-vertical-spacing-value);
     border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
   }
 
@@ -160,8 +166,10 @@
   }
 
   .govuk-header__logo {
-    @include govuk-responsive-margin(2, "bottom");
-    padding-right: govuk-spacing(8);
+    @include govuk-responsive-margin($govuk-header-vertical-spacing-value, "bottom");
+    // Protect the absolute positioned menu button from overlapping with the
+    // logo with right padding using the button's width
+    padding-right: $govuk-header-menu-button-width;
 
     @include govuk-media-query($from: desktop) {
       width: 33.33%;
@@ -189,13 +197,22 @@
   .govuk-header__menu-button {
     @include govuk-font($size: 16);
     position: absolute;
-    top: govuk-spacing(4);
+    // calculate top offset by:
+    // - getting the vertical spacing for the top and the bottom of the header
+    // - adding that to the crown height
+    // - dividing it by 2 so you have the vertical centre of the header
+    // - subtracting half the height of the menu button
+    top: (((govuk-spacing($govuk-header-vertical-spacing-value) * 2) + $govuk-header-crown-height) / 2) -
+      ($govuk-header-menu-button-height / 2);
     right: 0;
+    max-width: $govuk-header-menu-button-width;
+    min-height: $govuk-header-menu-button-height;
     margin: 0;
     padding: 0;
     border: 0;
     color: govuk-colour("white");
     background: none;
+    word-break: break-all;
     cursor: pointer;
 
     &:hover {