update ui

src/css/header.css

@@ -314,8 +314,9 @@ body {
     justify-content: center;
   }
 
-  .mobile-toolbar .field {
+  .mobile-toolbar .navbar-item.search {
     width: 100%;
+    display: block;
   }
 
   #search-input {
@@ -324,16 +325,12 @@ body {
 }
 
 @media screen and (min-width: 769px) {
-  .mobile-toolbar .field {
+  .mobile-toolbar .navbar-item.search {
     display: none;
   }
 }
 
 @media screen and (max-width: 1023.5px) {
-  .mobile-toolbar .field {
-    display: none;
-  }
-
   .navbar-brand {
     height: inherit;
   }
@@ -481,4 +478,8 @@ body {
     color: var(--color-white);
     font-weight: 600;
   }
+
+  .mobile-toolbar .navbar-item.search {
+    display: none;
+  }
 }

src/partials/nav-toggle.hbs

@@ -7,10 +7,11 @@
     </svg>
   </button>
   {{!-- {{#if env.SITE_SEARCH_PROVIDER}} --}}
+  <div class="navbar-item search hide-for-print">
     <div id="search-field" class="field">
-    {{!-- <input id="search-input" type="text" placeholder="Search the docs"{{#if page.home}} autofocus{{/if}}> --}}
       <input id="search-input" type="text">
       <i></i>
     </div>
+  </div>
   {{!-- {{/if}} --}}
 </div>