update

projects/nshmp-template/src/lib/components/header/header.component.html

@@ -2,7 +2,7 @@
 <header class="usa-header usa-header--basic" [ngClass]="{ 'header-minimal': minimal }">
   <div class="grid-row">
     <!-- USGS logo -->
-    <div class="grid-col">
+    <div class="grid-col-auto">
       <div class="usgs-logo border-0 width-auto">
         <img
           alt="U.S. Geological Survey"
@@ -14,18 +14,19 @@
       </div>
     </div>
 
+    <!-- Add content in header -->
+    <div class="grid-col-fill">
+      <ng-content></ng-content>
+    </div>
+
     <!-- USGS site wide search bar -->
     <ng-container *ngIf="!minimal ? renderSearchBar : false">
-      <nshmp-template-search-bar class="search-bar grid-col-12 mobile-lg:grid-col">
-      </nshmp-template-search-bar>
+      <nshmp-template-search-bar class="search-bar grid-col-auto"> </nshmp-template-search-bar>
     </ng-container>
 
-    <!-- Header controls and site navigation -->
-    <div class="grid-col-8 mobile-lg:grid-col-4 desktop:grid-col-2">
+    <!-- Site navigation -->
+    <div class="grid-col-auto">
       <div class="grid-row float-right">
-        <!-- Add content next to dropdown menu -->
-        <ng-content></ng-content>
-
         <!-- Header dropdown menu -->
         <nshmp-template-navigation class="margin-x-1" [navigationList]="navigationList">
         </nshmp-template-navigation>