searchbar overlay

assets/js/st-nav.js

@@ -1,17 +1,31 @@
 //Nav slide in logic
 
 const nav = document.querySelector('.st-nav');
-const openButton = document.querySelector('.st-open-nav');
+const openNavButton = document.querySelector('.st-open-nav');
-const closeButton = document.querySelector('.st-close-nav');
+const closeNavButton = document.querySelector('.st-close-nav');
 
-openButton.addEventListener('click', () => {
+openNavButton.addEventListener('click', () => {
     nav.classList.add('st-nav-is-open');
 });
 
-closeButton.addEventListener('click', () => {
+closeNavButton.addEventListener('click', () => {
     nav.classList.remove('st-nav-is-open');
 });
 
+//Search slide logic
+
+const searchOverlay = document.querySelector('.st-search-overlay');
+const openSearchButton = document.querySelector('.st-open-search');
+const closeSearchButton = document.querySelector('.st-close-search');
+
+openSearchButton.addEventListener('click', () => {
+    searchOverlay.classList.add('st-search-is-open');
+});
+
+closeSearchButton.addEventListener('click', () => {
+    searchOverlay.classList.remove('st-search-is-open');
+});
+
 //Sticky nav logic
 
 const iconBar = document.querySelector('.st-header-icon-bar');

header.php

@@ -26,7 +26,7 @@
             <a href="#" class="st-chip st-chip-primary">forum</a>
             <a href="#" class="st-chip st-chip-secondary">join</a>
             <a href="#" class="st-header-icon"><i class="fa fa-user"></i></a>
-            <a href="" class="st-header-icon"><i class="fa fa-search"></i></a>
+            <button class="st-nav-btn st-open-search" ><i class="fa fa-search st-open-search"></i></button>
             <button class="st-nav-btn st-open-nav" aria-label="Open Navigation">&#9776;</button>
         </div>
 
@@ -35,18 +35,26 @@
         <nav class="st-nav st-main-grid">
             <button class="st-nav-btn st-close-nav" aria-label="Close Navigation">&times;</button>
             <?php
-                wp_nav_menu(
+            wp_nav_menu(
-                    array(
+                array(
-                        'menu' => 'primary',
+                    'menu' => 'primary',
-                        'container' => '',
+                    'container' => '',
-                        'theme_location' => 'primary',
+                    'theme_location' => 'primary',
-                        'items_wrap' => '<ul class="st-nav-links">%3$s</ul>'
+                    'items_wrap' => '<ul class="st-nav-links">%3$s</ul>'
-                    )
+                )
-                );
+            );
             ?>
         </nav>
 
-        <div class="st-search-overlay">
+        <div class="st-search-overlay st-main-grid">
-
+            <button class="st-nav-btn st-close-search" aria-label="Close Search">&times;</button>
+            <form class="st-search-form" method="get" action="/">
+                <div class="st-searchbar-container">
+                    <input type="text" class="st-search-box" name="s" id="s" placeholder="What are you looking for?" />
+                    <button class="st-nav-btn st-btn-search">
+                        <i class="fa fa-search st-open-search"></i>
+                    </button>
+                </div>
+            </form>
         </div>
     </header>

style.css

@@ -129,7 +129,8 @@ SECTIONS
     pointer-events: auto;
 }
 
-.st-nav-is-open {
+.st-nav-is-open,
+.st-search-is-open {
     transform: translateX(100%);
 }
 
@@ -165,12 +166,39 @@ SECTIONS
     color: #d3d3d3;
 }
 
-.st-close-nav {
+.st-close-nav,
+.st-close-search {
     text-align: right;
     font-size: 2rem;
     height: 3rem;
 }
 
+.st-search-form {
+    margin-top: 2em;
+}
+
+.st-searchbar-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.st-search-box {
+    outline: none;
+    border: none;
+    border-bottom: 2px solid #0b4fa0;
+    color: #0b4fa0;
+}
+
+.st-btn-search {
+    margin-left: 1em;
+}
+
+.st-btn-search i {
+    color: #0b4fa0;
+    font-size: 1.25em;
+}
+
 /* footer */
 
 .st-footer {