#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.
undp · Feb 1, 2023 · 6d45916 · 6d45916
1 parent c0afb2c
commit 6d45916
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 10 deletions.
diff --git a/...Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/country-site-header.scss b/...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
@@ -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
@@ -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;