try out a different navbar approach

2 files changed, 45 insertions, 4 deletions

diff --git a/docs/assets/scss/_nav.scss b/docs/assets/scss/_nav.scss
index 95de4f78d..d0865143d 100644
--- a/docs/assets/scss/_nav.scss
+++ b/docs/assets/scss/_nav.scss
@@ -5,17 +5,39 @@
 //
 
 .bd-navbar {
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
-  z-index: 1030; // over everything in bootstrap
   min-height: 4rem;
   background-color: $bd-purple;
   border-bottom: 1px solid rgba(0,0,0,.1);
   box-shadow: 0 .5rem 1rem rgba(0,0,0,.05);
 
+  @include media-breakpoint-down(md) {
+    .navbar-nav-scroll {
+      max-width: 100%;
+      height: 2.5rem;
+      margin-top: .25rem;
+      overflow-x: hidden;
+      font-size: .85rem;
+
+      .navbar-nav {
+        padding-bottom: 2rem;
+        overflow-x: auto;
+        white-space: nowrap;
+        -webkit-overflow-scrolling: touch;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1030; // over everything in bootstrap
+  }
+
   .navbar-nav {
     .nav-link {
+      padding-right: .5rem;
+      padding-left: .5rem;
       color: $bd-purple-light;
 
       &.active,
diff --git a/docs/assets/scss/_sidebar.scss b/docs/assets/scss/_sidebar.scss
index 1c541b66e..0ba6bd667 100644
--- a/docs/assets/scss/_sidebar.scss
+++ b/docs/assets/scss/_sidebar.scss
@@ -61,6 +61,11 @@
 .bd-links {
   margin-right: -15px;
   margin-left: -15px;
+
+  // Override collapse behaviors
+  @include media-breakpoint-up(md) {
+    display: block !important;
+  }
 }
 
 .bd-search {
@@ -69,10 +74,18 @@
   padding-bottom: 1rem;
 }
 
+.bd-search-docs-toggle {
+  line-height: 1;
+  color: $gray-dark;
+}
+
 // Docsearch overrides
 //
 // `!important` indicates overridden properties.
 .algolia-autocomplete {
+  display: block !important;
+  flex: 1;
+
   // Menu container
   .ds-dropdown-menu {
     width: 100%;
@@ -115,6 +128,12 @@
     display: none !important;
   }
 
+  .algolia-docsearch-suggestion--text {
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    font-weight: normal;
+  }
+
   .algolia-docsearch-suggestion--highlight {
     color: #5f2dab;
     background-color: rgba(154, 132, 187, .12);