Changed up some cin7 templates.

Custom_Templates/customer_templates/Cin7 Customers/_header.html.liquid

@@ -86,7 +86,7 @@
     {% if current_person.signed_in? %}
       <div class="np-hidden-mobile np-header-search np-header-search-expanded">
         <form action="{% route search %}" method="get" data-test="desktop-search">
-          <i class="header-search-icon far fa-search np-header-font-color"></i>
+          <i id="search-icon" class="header-search-icon far fa-search np-header-font-color"></i>
           <input
             aria-label="{% t .search %}"
             class="header-search-input"
@@ -171,7 +171,7 @@
       >
         <input
           aria-label="{% t .search %}"
-          class="np-header-search-input"
+          class="np-header-search-input header-search-input"
           type="text"
           name="q"
           placeholder="{% t .search %}"
@@ -206,4 +206,42 @@
   </div>
 </div>
 
+
 {% include "messages" %}
+
+<style>
+  .header-search-input {
+    display: none;
+  }
+  [data-test="desktop-search"] {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
+  .np-header-desktop-nav-list {
+    width: 100%;
+  }
+</style>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    var searchIcon = document.getElementById("search-icon");
+    var searchInput = document.querySelector(".header-search-input");
+
+    searchIcon.addEventListener("click", function(event) {
+      event.stopPropagation(); 
+
+      if (searchInput.style.display === "block") {
+        searchInput.style.display = "none";
+      } else {
+        searchInput.style.display = "block";
+      }
+    });
+
+    document.addEventListener("click", function(event) {
+      if (event.target !== searchIcon && event.target !== searchInput) {
+        searchInput.style.display = "none";
+      }
+    });
+  });
+</script>