Style search for mobile

styles/_colors.scss

@@ -107,8 +107,10 @@ $code-color:      $secondary;
 $body-color:      $white;
 $headings-color:  $white;
 $text-muted:      $gray-200;
+
 $breadcrumb-bg:   $black;
 $breadcrumb-active-color: $gray-400;
+
 $dropdown-bg:     rgba(0,0,0,0.9);
 $dropdown-divider-bg: $black;
 $dropdown-border-color: $gray-900;
@@ -117,6 +119,16 @@ $dropdown-link-color: $white;
 $dropdown-link-hover-color: $primary;
 $dropdown-link-hover-bg: $gray-900;
 $dropdown-link-active-bg: transparent;
+
 $navbar-dark-color: $white;
 $navbar-dark-hover-color: $secondary;
 $navbar-dark-active-color: $primary;
+
+$input-bg: $gray-900;
+$input-disabled-bg: $gray-800;
+$input-color: $white;
+$input-border-color: transparent;
+$input-box-shadow: inset 0 1px 1px rgba($primary, .075);
+$input-placeholder-color: $gray-200;
+$input-group-addon-bg: $gray-600;
+$input-group-addon-color: $white;

styles/_top-nav.scss

@@ -148,7 +148,17 @@
 
   // Search bar & controls -----------------------------------------------------
   #navbar-search {
-    @include media-breakpoint-up(lg) {
+    .input-group-text,
+    .input-group > .input-group-append > .btn {
+      color: $white;
+      background-color: transparent;
+      border-width: 0;
+    }
+    .algolia-autocomplete {
+      flex-grow: 1;
+    }
+
+    @include media-breakpoint-up(lg) { // Desktop search styling ---------------
       position: static; // allows search bar to be positioned screen-center
       .dropdown-toggle {
         position: relative;
@@ -166,13 +176,6 @@
         width: 100%;
       }
 
-      #topsearchbox,
-      .input-group-text,
-      .input-group > .input-group-append > .btn {
-        color: $white;
-        background-color: transparent;
-        border-width: 0;
-      }
       #topsearchbox {
         line-height: 24px;
         height: 100%;
@@ -182,9 +185,30 @@
       .input-group > .input-group-append > .btn {
         border-left: 1px solid black;
       }
-      .algolia-autocomplete {
-        flex-grow: 1;
+    }
+    @include media-breakpoint-down(lg) { // Mobile search styling --------------
+      .form-inline label {
+        margin-bottom: 0;
+
+        .input-group-text {
+          line-height: 24px;
+        }
       }
+
+      .dropdown-menu { // search box is always expanded
+        display: block;
+        position: static;
+        background-color: transparent;
+        border: 0 none;
+        box-shadow: none;
+        margin-top: 0;
+        width: 100%;
+      }
+
+      .dropdown-toggle { // no dropdown to expand search
+        display: none;
+      }
+
     }
 
     // Algolia Search results --------------------------------------------------
@@ -224,6 +248,12 @@
       color: $white;
       background-color: $green-800;
     }
+
+    @include media-breakpoint-down(md) {
+      .algolia-autocomplete .ds-dropdown-menu {
+        min-width: unset;
+      }
+    }
   }
 
   // Mobile --------------------------------------------------------------------

tool/template-top-nav.html

@@ -47,7 +47,7 @@
               <div class="input-group">
                 <label class="input-group-prepend" for="topsearchbar"><i class="fa fa-search input-group-text"></i><span class="sr-only">{% trans %}Search site...{% endtrans %}</span></label>
                 <input id="topsearchbox" name="q" type="text" class="form-control" placeholder="{% trans %}Search site...{% endtrans %}">
-                <div class="input-group-append">
+                <div class="input-group-append d-none d-lg-flex">
                   <button type="button" class="btn btn-default" data-toggle="dropdown" data-target="topnav-search-dropdown-toggle"><i class="fa fa-times"></i><span class="sr-only">{% trans %}Close Search{% endtrans %}</span></button>
                 </div>
               </div><!--/.input-group-->