DP-19331 Set the nav bar height consistent in any screen sizes

assets/scss/03-organisms/_header-hamburger.scss

@@ -1,7 +1,7 @@
 $header-mobile-menu-width: 300px;
 $header-logo-width: 150px;
 $bp-header-logo-min: "min-width: 1000px";
-$utility-nav-height: 43px;
+$utility-nav-height: 44px;
 
 body.show-menu {
   overflow: hidden;
@@ -80,13 +80,12 @@ body.show-menu {
   }
 
   &-wrapper {
+    height: $utility-nav-height;
 
     @include ma-container;
 
     @media ($bp-medium-min) {
 
-      // @include ma-container;
-
       display: flex;
       justify-content: space-between;
     }
@@ -95,7 +94,6 @@ body.show-menu {
 
     @media ($bp-header-toggle-max) {
 
-      // @include ma-container;
       padding-right: 0;
       padding-left: 0;
       height: $header-mobile-controls-height;
@@ -112,8 +110,13 @@ body.show-menu {
     display: flex;
     justify-content: space-between;
 
-    @media ($bp-header-toggle-max) {
-      width: 100%;
+    // Expand close button to fll the blue bar.
+
+    .show-menu & {
+
+      @media ($bp-header-toggle-max) {
+        width: 100%;
+      }
     }
   }
 
@@ -279,11 +282,20 @@ body.show-menu {
     padding-left: 20px;
     transition: transform 0.5s ease;
 
+    // Expand close button to fll the blue bar.
+
+    .show-menu & {
+
+      @media ($bp-header-toggle-max) {
+        width: 100%;
+      }
+    }
+
     span:first-child {
       opacity: 0.7;
     }
 
-    @media ($bp-medium-max) {
+    @media ($bp-header-toggle-max) {
 
       padding-left: 30px;
     }
@@ -292,6 +304,11 @@ body.show-menu {
 
       padding-left: 0;
     }
+
+    @media ($bp-medium-max) {
+
+      padding-left: 20px;
+    }
   }
 
   &__menu-icon {

changelogs/DP-19331.yml

@@ -0,0 +1,6 @@
+Changed:
+  - project: Patternlab
+    component: HeaderHamburgerMenu
+    description: Set the height of the nav bar consistent regardless of screen sizes. (#1115)
+    issue: DP-19331
+    impact: Minor