Move search into the reduced navigation

scss/_patterns_navigation-reduced.scss

@@ -1,5 +1,8 @@
 @mixin vf-p-navigation-reduced {
   .p-navigation--reduced {
+    // height of reduced navigation calculated from line height and padding
+    $reduced-nav-height: calc(map-get($line-heights, x-small) + 2 * $spv--small);
+
     position: relative;
     z-index: 99; // display above sticky top navigation, but below modals/overlays
 
@@ -75,21 +78,18 @@
       }
     }
 
-    // hide secondary navigation banner when search is open on mobile
-    &.has-search-open + .has-search-open .p-navigation__banner {
-      display: none;
-    }
     @media (min-width: $breakpoint-navigation-threshold) {
-      &.has-search-open + .has-search-open .p-navigation__banner {
-        display: flex; // reset to value as defined in _patterns_navigation.scss
-      }
-
       &.has-search-open {
         // make sure reduced navigation items remain visible when search is open
         // both classes needed for specificity
         .p-navigation__nav .p-navigation__items {
           display: inline-flex;
         }
+
+        // position the search under the reduced navigation
+        .p-navigation__search {
+          top: $reduced-nav-height;
+        }
       }
     }
   }

scss/_patterns_navigation.scss

@@ -155,6 +155,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
     // p-search-box overrides
     .p-search-box {
+      background-color: $colors--theme--background-default;
       flex: 1 0 auto;
       margin-left: map-get($grid-margin-widths, small);
       margin-right: map-get($grid-margin-widths, small);
@@ -626,6 +627,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     // make sure search in navigation renders on top of the overlay
     .p-navigation__nav {
       display: flex;
+      position: relative;
       z-index: 60;
     }
 
@@ -636,7 +638,14 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
     // show expanded search box
     .p-navigation__search {
+      background-color: $colors--theme--background-default;
       display: flex;
+      position: absolute;
+      width: 100%;
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        background-color: transparent;
+      }
     }
 
     // fade in search overlay

templates/docs/examples/patterns/navigation/_script-sliding.js

@@ -37,9 +37,6 @@ const initNavigationSliding = () => {
     });
 
     navigation.classList.remove('has-search-open');
-    if (secondaryNavigation) {
-      secondaryNavigation.classList.remove('has-search-open');
-    }
     document.removeEventListener('keyup', keyPressHandler);
   };
 
@@ -56,15 +53,17 @@ const initNavigationSliding = () => {
   });
 
   const secondaryNavToggle = document.querySelector('.js-secondary-menu-toggle-button');
-  secondaryNavToggle.addEventListener('click', (event) => {
-    event.preventDefault();
-    closeSearch();
-    if (secondaryNavigation.classList.contains('has-menu-open')) {
-      closeAll();
-    } else {
-      secondaryNavigation.classList.add('has-menu-open');
-    }
-  });
+  if (secondaryNavToggle) {
+    secondaryNavToggle.addEventListener('click', (event) => {
+      event.preventDefault();
+      closeSearch();
+      if (secondaryNavigation.classList.contains('has-menu-open')) {
+        closeAll();
+      } else {
+        secondaryNavigation.classList.add('has-menu-open');
+      }
+    });
+  }
 
   const resetToggles = (exception) => {
     toggles.forEach(function (toggle) {
@@ -187,9 +186,6 @@ const initNavigationSliding = () => {
       });
 
       navigation.classList.add('has-search-open');
-      if (secondaryNavigation) {
-        secondaryNavigation.classList.add('has-search-open');
-      }
       searchInput.focus();
       document.addEventListener('keyup', keyPressHandler);
     };

templates/docs/examples/patterns/navigation/reduced.html

@@ -129,8 +129,16 @@
           <a href="#" class="js-search-button p-navigation__link--search-toggle" aria-label="Toggle search"></a>
         </li>
       </ul>
+      <div class="p-navigation__search">
+        <form class="p-search-box">
+          <input type="search" class="p-search-box__input" name="q" placeholder="Search our sites" required="" aria-label="Search our sites">
+          <button type="reset" class="p-search-box__reset"><i class="p-icon--close"></i></button>
+          <button type="submit" class="p-search-box__button"><i class="p-icon--search"></i></button>
+        </form>
+      </div>
     </nav>
   </div>
+  <div class="p-navigation__search-overlay"></div>
 </header>
 
 <div id="secondary-navigation" class="p-navigation is-sticky is-secondary is-dark">
@@ -165,16 +173,8 @@
           <a class="p-navigation__link" href="#">WSL</a>
         </li>
       </ul>
-      <div class="p-navigation__search">
-        <form class="p-search-box">
-          <input type="search" class="p-search-box__input" name="q" placeholder="Search our sites" required="" aria-label="Search our sites">
-          <button type="reset" class="p-search-box__reset"><i class="p-icon--close"></i></button>
-          <button type="submit" class="p-search-box__button"><i class="p-icon--search"></i></button>
-        </form>
-      </div>
     </nav>
   </div>
-  <div class="p-navigation__search-overlay"></div>
 </div>
 
 <main id="main-content" class="inner-wrapper">