refactor the entire header

assets/sass/site.scss

@@ -8,56 +8,78 @@ body {
 }
 
 // Header
-.techgsa-header {
-  background-color: color('base-darkest');
+.techgsa-header__logo {
+  height: 100%;
+  margin-left: 0;
 }
 
-.techgsa-logo {
+.techgsa-header__logo-image {
   @include u-height('full');
+
+  @include at-media(desktop) {
+    @include u-height(7);
+  }
 }
 
-.techgsa-logo__image {
-  @include u-height('full');
+.techgsa-header__logo-text {
+  display: none;
 
   @include at-media(desktop) {
-    @include u-height(7);
+    display: inline;
+    position: relative;
+    bottom: 8px;
+    padding-left: 1rem;
+    @include u-font('sans', 'lg');
   }
 }
 
-.techgsa-logo__text {
-  position: relative;
-  display: inline;
-  padding-left: 1rem;
-  bottom: 8px;
-  color: white;
-  font-size: 1.5rem;
+.techgsa-header__nav {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  @include at-media(desktop) {
+    flex-direction: row;
+  }
 }
 
-// Footer
-.techgsa-footer {
-  margin-top: 8rem;
+.techgsa-header__nav-title {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
-// Primary navigation
-.techgsa-nav-container {
-  .usa-navbar {
-    border-bottom: none;
-  }
+.techgsa-header__nav-title-text {
+  @include u-font('sans', 'lg');
+  @include u-line-height('sans', 1);
+  @include u-text('bold');
+  @include u-text('no-underline');
+  @include u-text('base-darkest');
+}
 
-  .usa-nav__link span {
-    color: color('primary-light');
-  }
+.techgsa-header__nav-links {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
 
-  .usa-nav__primary>.usa-nav__primary-item>a {
-    @include at-media(desktop) {
-      padding: 1rem 1rem 1.5rem 1rem;
-    }
-  }
+.usa-nav__primary > .usa-nav__primary-item > a {
+  @include u-text('base-darkest');
+  white-space: nowrap;
+}
+
+.usa-nav__primary > .usa-nav__primary-item > a.usa-current {
+  @include u-text('primary');
+}
+
+// Footer
+.techgsa-footer {
+  margin-top: 8rem;
 }
 
 // Breadcrumbs
 .techgsa-breadcrumbs {
-  background-color: color('base-lightest');
+  background-color: color('gray-2');
 }
 
 // Apply USWDS table style to all tables

assets/sass/uswds/_uswds-theme.scss

@@ -25,13 +25,14 @@ in the form $setting: value,
   // COMPONENT
   //
 
+  $theme-header-logo-text-width: 50%,
   $theme-banner-max-width: "desktop-lg",
   $theme-footer-max-width: "desktop-lg",
   $theme-header-max-width: "desktop-lg",
   $theme-header-min-width: "desktop",
   $theme-identifier-max-width: "desktop-lg",
   $theme-site-alert-max-width: "desktop-lg",
-  $theme-breadcrumb-background-color: "base-lightest",
+  $theme-breadcrumb-background-color: "gray-2",
   $theme-breadcrumb-font-size: "xs",
   $theme-breadcrumb-padding-bottom: "2px",
   $theme-breadcrumb-padding-top: "2px",

layouts/partials/header.html

@@ -1,42 +1,58 @@
-<header class="usa-header usa-header--basic techgsa-header">
-  <div class="usa-nav-container techgsa-nav-container">
-    <div class="usa-navbar">
-      <div class="usa-logo techgsa-logo" id="basic-logo">
-        <a href="/" title="Home" aria-label="Home">
-          <img src="/assets/img/gsa_logo.svg" alt="GSA logo" class="usa-logo__image techgsa-logo__image">
-          <em class="usa-logo__text techgsa-logo__text">{{ .Site.Title }}</em>
-        </a>
-      </div>
-      <button class="usa-menu-btn">Menu</button>
+<div class="usa-overlay"></div>
+<header class="usa-header usa-header--extended techgsa-header">
+  <div class="usa-navbar">
+    <div class="usa-logo techgsa-header__logo">
+      <a href="/">
+        <img src="/assets/img/gsa_logo.svg" class="techgsa-header__logo-image" alt="GSA logo">
+        <span class="techgsa-header__logo-text">U.S. General Services Administration</span>
+      </a>
     </div>
-    <nav aria-label="Primary navigation" class="usa-nav">
-      <button class="usa-nav__close"><img src="/assets/uswds/img/usa-icons/close.svg" role="img" alt="close"></button>
-      <ul class="usa-nav__primary usa-accordion">
-        {{ $currentPage := . }}
-        {{ range .Site.Menus.primary }}
-          <li class="usa-nav__primary-item">
-            <a href="{{ .URL }}" class="usa-nav__link {{ if or ($currentPage.HasMenuCurrent "primary" .) ($currentPage.IsMenuCurrent "primary" .) }}usa-current{{ end }}">
-              <span>{{ .Name }}</span>
-            </a>
-          </li>
-        {{ end }}
-      </ul>
-      <form class="usa-search usa-search--small" role="search" action="/search">
-        <label class="usa-sr-only" for="search-field-en-small"> Search </label>
-        <input
-          class="usa-input"
-          id="search-field-en-small"
-          type="search"
-          name="search"
-        />
-        <button class="usa-button" type="submit">
-          <img
-            src="/assets/uswds/img/usa-icons-bg/search--white.svg"
-            class="usa-search__submit-icon"
-            alt="Search"
-          />
-        </button>
-      </form>
-    </nav>
+    <button type="button" class="usa-menu-btn">Menu</button>
   </div>
-</header>
+  <nav aria-label="Primary navigation" class="usa-nav">
+    <div class="usa-nav__inner">
+      <button type="button" class="usa-nav__close">
+        <img src="/assets/uswds/img/usa-icons/close.svg" role="img" alt="Close" />
+      </button>
+      <div class="techgsa-header__nav">
+        <div class="techgsa-header__nav-title">
+          <a href="/" class="techgsa-header__nav-title-text">{{ .Site.Title }}</a>
+        </div>
+        <div class="techgsa-header_nav-links">
+          <ul class="usa-nav__primary usa-accordion">
+            {{ $currentPage := . }}
+            {{ range .Site.Menus.primary }}
+              <li class="usa-nav__primary-item">
+                <a href="{{ .URL }}" class="usa-nav__link {{ if or ($currentPage.HasMenuCurrent "primary" .) ($currentPage.IsMenuCurrent "primary" .) }}usa-current{{ end }}">
+                  <span>{{ .Name }}</span>
+                </a>
+              </li>
+            {{ end }}
+          </ul>
+        </div>
+      </div>
+      <div class="usa-nav__secondary">
+        <ul class="usa-nav__secondary-links">
+        </ul>
+          <section aria-label="Search component">
+            <form class="usa-search usa-search--small" role="search" action="/search">
+              <label class="usa-sr-only" for="search-field">Search</label>
+              <input
+                class="usa-input"
+                id="search-field"
+                type="search"
+                name="search"
+              />
+              <button class="usa-button" type="submit">
+                <img
+                  src="/assets/uswds/img/usa-icons-bg/search--white.svg"
+                  class="usa-search__submit-icon"
+                  alt="Search"
+                />
+              </button>
+            </form>
+          </section>
+      </div>
+    </div>
+  </nav>
+</header>