fixed x icon on navbar

_includes/header.html

@@ -5,50 +5,6 @@
 {% include meta.html %}
 <div class="page-landing-page layout-demo ">
   <a class="usa-skipnav" href="#main-content">Skip to main content</a>
-  <!-- <div class="usa-banner">
-    <div class="usa-accordion">
-      <header class="usa-banner__header">
-        <div class="usa-banner__inner">
-          <div class="grid-col-auto">
-            <img class="usa-banner__header-flag" alt="U.S. flag" src="{{ site.baseurl }}/assets/img/us_flag_small.png">
-          </div>
-          <div class="grid-col-fill tablet:grid-col-auto">
-            <p class="usa-banner__header-text">An official website of the United States government</p>
-            <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
-          </div>
-          <button class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner">
-            <span class="usa-banner__button-text">Here's how you know</span>
-          </button>
-        </div>
-      </header>
-      <div class="usa-banner__content usa-accordion__content" id="gov-banner">
-        <div class="grid-row grid-gap-lg">
-          <div class="usa-banner__guidance tablet:grid-col-6">
-            <img class="usa-banner__icon usa-media-block__img" alt="Dot gov" src="{{ site.baseurl }}/assets/img/icon-dot-gov.svg">
-            <div class="usa-media-block__body">
-              <p>
-                <strong>The .gov means it’s official.</strong>
-                <br>
-                Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure
-                you’re on a federal government site.
-              </p>
-            </div>
-          </div>
-          <div class="usa-banner__guidance tablet:grid-col-6">
-            <img class="usa-banner__icon usa-media-block__img" alt="Https" src="{{ site.baseurl }}/assets/img/icon-https.svg">
-            <div class="usa-media-block__body">
-              <p>
-                <strong>The site is secure.</strong>
-                <br>
-                The <strong>https://</strong> ensures that you are connecting to the official website and that any
-                information you provide is encrypted and transmitted securely.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div> -->
 
   <section
   class="usa-banner"

_includes/menu.html

@@ -10,7 +10,7 @@
   </div>
   <nav role="navigation" class="usa-nav">
     <div class="usa-nav__inner">
-      <button class="usa-nav__close"><img alt="close" src="{{ site.baseurl }}/assets/img/close.svg"></button>
+      <button class="usa-nav__close side-nav"><img alt="close" src="{{ site.baseurl }}/assets/img/close.svg"></button>
       <ul class="usa-nav__primary usa-accordion">
         {% for nav_item in include.primary_navigation %}
         {% unless nav_item.children %}

_includes/meta.html

@@ -55,4 +55,6 @@
   <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/main.css?{{ site.time | date: '%s%N' }}">
   <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/banner.css?{{ site.time | date: '%s%N' }}">
   <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/podcast.css?{{ site.time | date: '%s%N' }}">
+  <script src="{{ site.baseurl }}/assets/js/uswds-init.min.js?{{ site.time | date: '%s%N' }}"></script>
+
 </head>

assets/css/index.scss

@@ -26,23 +26,6 @@ $cdoc-blue-50: #2378c3;
   }
 }
 
-// .usa-banner__button::after, .usa-banner__button[aria-expanded="true"]::after, .usa-banner__header-action::after {
-//   background: url(../images/chevron.svg) no-repeat center / 1.3128205128ex 0.8ex;
-// }
-
-// .usa-banner__button:hover::after, .usa-banner__button[aria-expanded="true"]:hover::after, .usa-banner__header-action::after{
-//   background-color: transparent;
-// }
-
-// .usa-banner__button::after,  .usa-banner__button:hover::after{
-//   position: relative;
-// }
-
-// .usa-banner__button[aria-expanded="true"]::after, .usa-banner__button[aria-expanded="true"]:hover::after {
-//   background: url(../img/usa-icons/expand_less.svg) no-repeat center / 1rem 1rem;
-//   position: relative;
-// }
-
 // for lists like (A), (B), (C)...
 .ol-upperCase ol { counter-reset: item }
 .ol-upperCase li { display: block ; counter-increment: item; }
@@ -70,21 +53,11 @@ $cdoc-blue-50: #2378c3;
   .usa-media-block {
     display: block;
   }
-  // .usa-banner__button[aria-expanded="true"]::after{
-  //     background: url(../img/close-alt.svg) no-repeat center / 1rem 1rem;
-  // }
-  // .usa-banner__button::after {
-  //   background: url(../img/chevron.svg) no-repeat center / 1.3128205128ex 0.8ex;
-  // }
 
 }
 @media screen and (max-width: 768px) {
 
 }
-// default mode hide banner
-/*.usa-banner__content {
-  display: none;
-}*/
 
 @media screen and (min-width: 640px) {
   .tablet\:width-1\/3 {
@@ -128,10 +101,6 @@ $cdoc-blue-50: #2378c3;
   }
 }
 
-// html,p,div {
-// font-family: "Public Sanas Sans"!important;
-// }
-
 abbr{
   text-decoration: none !important;
 }
@@ -144,6 +113,11 @@ abbr{
   background-position: 0 30px;
 }
 
+// Side nav
+.usa-nav__close.side-nav img {
+  width: .75rem;
+}
+
 // Homepage Focus icons
 
 .working-group__icon-col {
@@ -197,14 +171,6 @@ abbr{
   margin-left: 0;
 }
 
-/*.usa-button {
-  background-color: $cdoc-blue;
-
-  &.bg-white {
-    background-color: #fff;
-  }
-}*/
-
 #main-content{
   background-color: #fefefe;
 }
@@ -222,7 +188,6 @@ abbr{
 }
 .bg-gradient{
   background: rgb(19,38,139);
-  /*background: linear-gradient(52deg, rgba(19,38,139,1) 0%, rgba(15,34,121,1) 49%, rgba(10,30,104,1) 58%, rgba(6,26,90,1) 67%, rgba(1,21,74,0.9794292717086834) 74%, rgba(0,20,70,1) 100%);*/
   background: linear-gradient(52deg, #162e51 0%, #005ea2 100%);
 
 }
@@ -425,9 +390,6 @@ abbr{
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
- /* &:hover {
-    background-color: #eafaff;
-  }*/
 }
 
 .usa-accordion--bordered .usa-accordion__content {