From 6d4591628170c18ede2aff427f7ddd0c11c020a5 Mon Sep 17 00:00:00 2001
From: Philip Boden <philip.boden@gmail.com>
Date: Tue, 31 Jan 2023 22:52:09 -0800
Subject: [PATCH] #916

Country and Global headers shouldn't change to tablet/mobile layout until it's <1024px

#915

Also includes some css to fix the glitchy mega menu activation. Sets the links to take up the full height of the header so the js that triggers the mega menu has a larger activation area.
---
 .../country-site-header.scss                  | 26 ++++++++++++++++---
 stories/assets/scss/_breakpoints.scss         |  9 ++++---
 stories/assets/scss/_mixins.scss              |  6 ++---
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/country-site-header.scss b/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/country-site-header.scss
index b5560e31c..08c6e9f6c 100644
--- a/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/country-site-header.scss
+++ b/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/country-site-header.scss
@@ -20,8 +20,8 @@
       font-size: $font-size-16;
       line-height: 1.142;
       margin-top: -0.25rem;
+      margin-right: 1.5rem;
       padding: 0.438rem 0;
-      width: calc(100% - 52px);
 
       @include devicebreak(mediumonlytab) {
         width: calc(100% - 64px);
@@ -82,21 +82,41 @@
     }
 
     .menu {
-      align-items: center;
+      align-items: stretch;
       align-self: stretch;
       display: flex;
       min-height: 7.1875rem;
+      margin: auto;
 
       @include devicebreak(mediumonlytab) {
         display: none;
       }
 
+      ul {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: row;
+      }
+
       li {
-        margin: $spacing-04 0 $spacing-04 3.6875rem;
+        margin: 0 0 0 2.25rem;
+        display: flex;
+        align-items: stretch;
+        align-self: stretch;
+
+        @include devicebreak(xlarge) {
+          margin: 0 0 0 3.6875rem;
+        }
 
         &:first-of-type {
           margin-left: 0;
         }
+
+        a {
+          display: flex;
+          align-items: center;
+        }
       }
     }
 
diff --git a/stories/assets/scss/_breakpoints.scss b/stories/assets/scss/_breakpoints.scss
index 886d211d2..be200a7b4 100644
--- a/stories/assets/scss/_breakpoints.scss
+++ b/stories/assets/scss/_breakpoints.scss
@@ -7,9 +7,10 @@
   }
 
   @else if $point==mediumonlytab {
+
     /* medium design tab */
-    @media (max-width: 89.9375em) {
-      @content;
+    @media (max-width: 63.9375em) {
+       @content;
     }
   }
 
@@ -21,14 +22,14 @@
   }
 
   @else if $point==large {
-    /* medium design */
+    /* large design */
     @media (min-width: 64em) {
       @content;
     }
   }
 
   @else if $point==xlarge {
-    /* large design */
+    /* xlarge design */
     @media (min-width: 90em) {
       @content;
     }
diff --git a/stories/assets/scss/_mixins.scss b/stories/assets/scss/_mixins.scss
index 1787e9ea7..6456a1362 100755
--- a/stories/assets/scss/_mixins.scss
+++ b/stories/assets/scss/_mixins.scss
@@ -150,6 +150,7 @@
   margin-right: $spacing-03;
   padding: 0;
   width: 25px;
+  min-width: 25px;
 
   @include devicebreak(small) {
     margin-right: 0;
@@ -600,12 +601,10 @@
 
 %logo {
   @include transition(all 0.4s cubic-bezier(0.64, 0.05, 0.35, 1.05));
-
-  width: 40px;
+  min-width: 60px;
 
   @include devicebreak(xlarge) {
     height: ($header-height-xlarge + 7px);
-    width: 60px;
 
     &.scrolled {
       height: $header-height-xlarge;
@@ -614,6 +613,7 @@
 
   @include devicebreak(mediumonlytab) {
     height: ($header-height-medium + 7px);
+    min-width: 40px;
 
     &.scrolled {
       height: $header-height-medium;