adjust navbar layout

src/client/styles/scss/_navbar.scss

@@ -6,6 +6,16 @@
     font-size: 1.5em;
   }
 
+  .grw-navbar-search {
+    left: $grw-logo-width + 19px;
+
+    @include media-breakpoint-up(lg) {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, 0%);
+    }
+  }
+
   .nav-link,
   .nav-item.confidential {
     display: flex;

src/client/styles/scss/_search.scss

@@ -110,6 +110,10 @@
     &.focus {
       width: 300px;
     }
+
+    @include media-breakpoint-up(xl) {
+      width: 300px;
+    }
   }
 }
 

src/server/views/layout/layout.html

@@ -80,14 +80,14 @@
     </ul>
 
     {# Brand Logo #}
-    <div class="navbar-brand mr-md-auto">
+    <div class="navbar-brand mr-0">
       <a class="grw-logo d-block" href="/">
         {% include '../widget/logo.html' %}
       </a>
     </div>
 
-    {# Navbar Center #}
-    <ul class="navbar-nav d-none d-md-block">
+    {# Search #}
+    <ul class="navbar-nav grw-navbar-search d-none d-md-block position-absolute">
       <li>
         {% if isSearchServiceConfigured() %}
         <div class="search-top" role="search" id="search-top"></div>