Fixes the nested nav's interaction with the custom search component (o…

…pensearch-project#1251) Signed-off-by: Miki <[email protected]> Signed-off-by: Miki <[email protected]>
alicejw1 · Sep 19, 2022 · 981ec77 · 981ec77
1 parent 9da8dc2
commit 981ec77
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -127,7 +127,7 @@ <h1><a href="#">Documentation</a></h1>
       </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 %}

diff --git a/_sass/_nested-nav.scss b/_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;
 

diff --git a/_sass/custom/custom.scss b/_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 {