Search header

_assets/css/_uswds-theme-custom-styles.scss

@@ -71,6 +71,11 @@ i.e.
   @include u-text('secondary');
 }
 
+.usa-social-link {
+  @include u-margin-top(3);
+  @include u-margin-right(1);
+}
+
 .usa-social-link--linkedin {
   background-image: url(asset_path("linkedin.svg")), linear-gradient(transparent, transparent);
   background-repeat: no-repeat;
@@ -89,7 +94,10 @@ i.e.
   color: white;
 }
 
-.usa-header--basic .usa-nav-container {
+
+
+.usa-header--extended .usa-nav__inner,
+ .usa-header--extended .usa-navbar {
   @include at-media('desktop') {
     width: 100%;
     max-width: unset;
@@ -102,3 +110,13 @@ i.e.
   padding: 0.5rem 1rem;
   text-decoration: none;
 }
+
+
+.usa-nav__secondary .usa-search {
+  @include at-media('desktop'){
+    width: 65%;
+    float: left;
+  }
+}
+
+

_config.yml

@@ -46,16 +46,7 @@ primary_navigation:
     url: /projects/
   - name: Agencies
     url: /agencies/
-  # - name: About Us
-  #   children:
-  #     - name: Blog
-  #       url: /blog/
-  #     - name: Document
-  #       url: /document/
-  #     - name: Document with sidenav
-  #       url: /document-with-sidenav/
-  - name: Apply
-    url: /apply/
+
 
 secondary_navigation:
   - name: Secondary link

_includes/footer.html

@@ -37,12 +37,13 @@ <h4 class="usa-footer__primary-link">Get in touch</h4>
                       <a class="usa-social-link usa-social-link--twitter" href="https://twitter.com/PIFgov">
                         <span>Twitter</span>
                       </a>
-                    </li>
-                    <li>
                       <a class="usa-social-link usa-social-link--linkedin" href="https://www.linkedin.com/company/white-house-presidential-innovation-fellows/">
                         <span>LinkedIn</span>
                       </a>
                     </li>
+                    <li>
+
+                    </li>
 
                   </ul>
                 </section>

_includes/menu.html

@@ -1,9 +1,9 @@
-{% comment %}
+<!-- {% comment %}
 To modify the menu system, you are welcome to edit this HTML directly or you can look inside _config.yml
 where we provide an easy way to manage your navigation system
 {% endcomment %}
 
-<header class="usa-header bg-primary-darker site-header usa-header--basic" role="banner">
+<header class="usa-header bg-primary-darker site-header usa-header--extended" role="banner">
   <div class="usa-nav-container">
   <div class="usa-navbar site-navbar">
     {% include logo.html %}
@@ -41,4 +41,51 @@
         {% include searchgov/form.html searchgov=site.searchgov %}
   </nav>
   </div>
-</header>
+</header> -->
+<header class="usa-header bg-primary-darker usa-header--extended"><div class="usa-navbar">
+  {% include logo.html %}
+  <button class="usa-menu-btn">Menu</button>
+</div>
+<nav aria-label="Primary navigation" class="usa-nav">
+    <div class="usa-nav__inner"><button class="usa-nav__close">{% asset close.svg alt="close" %}</button>
+<ul class="usa-nav__primary usa-accordion">
+  {% for nav_item in include.primary_navigation %}
+        {% unless nav_item.children %}
+        {% assign basedir = page.url | remove_first: '/' | split: '/' | first | lstrip %}
+        {% assign linkdir = nav_item.url |  replace: "/", ""  | lstrip %}
+        <li class="usa-nav__primary-item">
+          <a class="usa-nav__link{% if basedir == linkdir %} usa-current{% endif %}{% if linkdir == 'apply' %} usa-button usa-button--secondary{% endif %}"
+            href="{{ nav_item.url | prepend: site.baseurl}}"><span>{{ nav_item.name | escape }}</span></a>
+        </li>
+        {% else %}        {% assign nav_id = 'primary-nav-' | append: forloop.index %}
+        <li class="usa-nav__primary-item">
+          <button class="usa-accordion__button usa-nav__link" aria-expanded="false"
+            aria-controls="{{ nav_id }}"><span>{{ nav_item.name | escape }}</span></button>
+          <ul id="{{ nav_id }}" class="usa-nav__submenu">
+            {% for subnav_item in nav_item.children %}
+            <li class="usa-nav__submenu-item">
+              <a href="{{ subnav_item.url | prepend: site.baseurl }}">{{ subnav_item.name | escape }}</a>
+            </li>
+            {% endfor %}
+          </ul>
+
+        </li>
+        {% endunless %}
+        {% endfor %}
+  </ul>
+  <div class="usa-nav__secondary">
+  <!-- <ul class="usa-nav__secondary-links"><li class="usa-nav__secondary-item">
+      <a href="">Secondary link</a>
+    </li><li class="usa-nav__secondary-item">
+      <a href="">Another secondary link</a>
+    </li>
+  </ul> -->
+{% include searchgov/form.html searchgov=site.searchgov %}
+<div class="flex-align-end float-right">
+  <a class="usa-nav__link{% if basedir == linkdir %} usa-current{% endif %} usa-button usa-button--secondary"
+    href="{{  site.baseurl }}/apply/"><span>Apply</span></a>
+</div>
+</div>
+</div>
+  </nav>
+</header>