DP-20090 menu search align

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

@@ -91,13 +91,12 @@ body.show-menu {
   }
 
   &-wrapper {
+    display: flex;
     height: $utility-nav-height;
 
     @include ma-container;
 
     @media ($bp-medium-min) {
-
-      display: flex;
       justify-content: space-between;
     }
 
@@ -118,6 +117,7 @@ body.show-menu {
   &__button-container {
     display: flex;
     justify-content: space-between;
+    width: inherit;
 
     // Expand close button to fll the blue bar.
 
@@ -307,12 +307,11 @@ body.show-menu {
     font-size: 19.2px;// Maintain the same font size regardless of the screensize.
     font-weight: 700;
     color: $c-font-inverse;
-    height: 44px;
-    line-height: 44px;
-    margin-top: 0;
     padding-right: 30px;
     padding-left: 20px;
     transition: transform 0.5s ease;
+    display: flex;
+    align-items: center;
 
     // Expand close button to fll the blue bar.
 
@@ -352,7 +351,10 @@ body.show-menu {
     position: absolute;
     transition: all 500ms ease-in-out;
     width: 15px;
-    top: 19px;
+
+    .ios-safari-less-than-11 & {
+      top: 20px;
+    }
 
     &:before,
     &:after {

changelogs/DP-20090.yml

@@ -0,0 +1,6 @@
+Fixed:
+  - project: Patternlab
+    component: Header
+    description: Fixed menu icon, text, search alignment. (#1200)
+    issue: DP-20090
+    impact: Patch

patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js

@@ -884,3 +884,17 @@ function closeSubMenu() {
     openSubMenu.classList.remove("submenu-open");
   }
 }
+
+// Target iOS Safari versions less than 11 to handle issues that cannot be targeted
+// with behavior detection due to either buggy or idiosyncratic browser implementation
+// issues addressed in later major versions.
+if (osInfo.indexOf("Safari") !== -1) {
+  osInfo.split(" ").forEach(function(splitVar) {
+    if (splitVar.length > 0 && splitVar.indexOf("Version/", 0) !== false) {
+      let version = splitVar.match(/\d+/);
+      if (version !== null && version[0] < 11) {
+        body.classList.add("ios-safari-less-than-11");
+      }
+    }
+  });
+}