Fixes the nested nav's interaction with the custom search component (#1251)

Signed-off-by: Miki <miki@amazon.com>

Signed-off-by: Miki <miki@amazon.com>

_layouts/default.html

@@ -127,7 +127,7 @@ layout: table_wrappers
       </div>
       <div class="search-overlay"></div>
     </div>
-    <div class="main" id="top">
+    <div class="main">
       <div id="main-content-wrap" class="main-content-wrap">
         {% unless page.url == "/" %}
           {% if page.parent %}

_sass/_nested-nav.scss

@@ -1,8 +1,8 @@
-#top {
-  z-index: 9;
-}
-
 @media screen and (min-width: 46.25rem) {
+  #top {
+    z-index: 9;
+  }
+
   [role="banner"] {
     overflow: visible;
 

_sass/custom/custom.scss

@@ -1004,6 +1004,13 @@ main {
 }
 
 .search-active {
+  body {
+    position: fixed;
+
+    @include mq(md) {
+      position: unset;
+    }
+  }
   .main {
     position: relative !important;
   }
@@ -1018,6 +1025,7 @@ main {
   }
 }
 
+
 .site-header {
   background: #D9E1E2;
   font-weight: 300;
@@ -1161,8 +1169,10 @@ version-selector {
   }
 }
 
-.banner-alert ~ main .custom-search-results {
-  max-height: calc(100vh - 200% - 60px - 3.6rem) !important;
+@include respond-min(46.25rem) {
+  .banner-alert ~ main .custom-search-results {
+    max-height: calc(100vh - 200% - 60px - 3.6rem) !important;
+  }
 }
 
 .search-spinner {