Pinned filter and search bar to the top of the page when scrolling

Author: Maarimar

_includes/current-projects.html

@@ -33,24 +33,26 @@ <h3 class="filters-title">
       <div class="search-tip-link">
         <a href="#" id="search-tip-link">Search Tips</a>
       </div>
+
+      <!-- Search bar moved here to appear directly below the Search Tips link -->
+      <form id="search-bar">
+        <input type="text" name="Search" id="search" placeholder="Search By Keywords">
+        <button class="search-x" aria-label="Cancel Search" tabindex="2">
+          <svg id="search-close" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M18 6L6 18" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M6 6L18 18" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+        <button class="search-glass" aria-label="Search by Keywords" tabindex="1">
+          <svg id="search-magnify-glass" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3248 12.8987L19.7048 18.2787C19.8939 18.468 20 18.7246 20 18.9921C19.9999 19.2596 19.8935 19.5161 19.7043 19.7052C19.515 19.8943 19.2584 20.0005 18.9909 20.0004C18.7234 20.0003 18.4669 19.894 18.2778 19.7047L12.8978 14.3247C11.2895 15.5704 9.26705 16.1566 7.24189 15.9641C5.21674 15.7716 3.341 14.8148 1.99625 13.2884C0.6515 11.7619 -0.0612416 9.78056 0.00301976 7.74729C0.0672812 5.71402 0.903718 3.7816 2.34217 2.34315C3.78063 0.904695 5.71305 0.0682577 7.74631 0.00399633C9.77958 -0.0602651 11.761 0.652477 13.2874 1.99723C14.8138 3.34198 15.7706 5.21772 15.9631 7.24287C16.1556 9.26802 15.5694 11.2905 14.3238 12.8987H14.3248ZM7.99977 13.9997C9.59107 13.9997 11.1172 13.3676 12.2424 12.2424C13.3676 11.1172 13.9998 9.59104 13.9998 7.99974C13.9998 6.40845 13.3676 4.88232 12.2424 3.7571C11.1172 2.63189 9.59107 1.99974 7.99977 1.99974C6.40847 1.99974 4.88235 2.63189 3.75713 3.7571C2.63191 4.88232 1.99977 6.40845 1.99977 7.99974C1.99977 9.59104 2.63191 11.1172 3.75713 12.2424C4.88235 13.3676 6.40847 13.9997 7.99977 13.9997Z" fill="#333333"/>
+          </svg>
+        </button>
+      </form>
     </div>
   </nav>
 
   <div class="projects-and-filters">
-    <form id="search-bar">
-      <input type="text" name="Search" id="search" placeholder="Search By Keywords">
-      <button class="search-x" aria-label="Cancel Search" tabindex="2">
-        <svg id="search-close" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M18 6L6 18" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M6 6L18 18" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      </button>
-      <button class="search-glass" aria-label="Search by Keywords" tabindex="1">
-        <svg id="search-magnify-glass" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3248 12.8987L19.7048 18.2787C19.8939 18.468 20 18.7246 20 18.9921C19.9999 19.2596 19.8935 19.5161 19.7043 19.7052C19.515 19.8943 19.2584 20.0005 18.9909 20.0004C18.7234 20.0003 18.4669 19.894 18.2778 19.7047L12.8978 14.3247C11.2895 15.5704 9.26705 16.1566 7.24189 15.9641C5.21674 15.7716 3.341 14.8148 1.99625 13.2884C0.6515 11.7619 -0.0612416 9.78056 0.00301976 7.74729C0.0672812 5.71402 0.903718 3.7816 2.34217 2.34315C3.78063 0.904695 5.71305 0.0682577 7.74631 0.00399633C9.77958 -0.0602651 11.761 0.652477 13.2874 1.99723C14.8138 3.34198 15.7706 5.21772 15.9631 7.24287C16.1556 9.26802 15.5694 11.2905 14.3238 12.8987H14.3248ZM7.99977 13.9997C9.59107 13.9997 11.1172 13.3676 12.2424 12.2424C13.3676 11.1172 13.9998 9.59104 13.9998 7.99974C13.9998 6.40845 13.3676 4.88232 12.2424 3.7571C11.1172 2.63189 9.59107 1.99974 7.99977 1.99974C6.40847 1.99974 4.88235 2.63189 3.75713 3.7571C2.63191 4.88232 1.99977 6.40845 1.99977 7.99974C1.99977 9.59104 2.63191 11.1172 3.75713 12.2424C4.88235 13.3676 6.40847 13.9997 7.99977 13.9997Z" fill="#333333"/>
-        </svg>
-      </button>
-    </form>
     <div class="page-contain projects-inner" >
       <ul class="project-list unstyled-list"></ul>
     </div>

_sass/elements/_dropdown_filters.scss

@@ -32,7 +32,7 @@ a.filter-item {
 .filter-toolbar {
   padding: 8px 32px;
   box-sizing: border-box;
-  height: calc(100vh - 60px);
+  height: auto;
   position: sticky;
   flex-shrink: 0;
   top: 64px;
@@ -258,9 +258,10 @@ a.clear-filter-tags {
 
   .filter-toolbar {
     background-color: $color-pink;
-    height: 100%;
-    position: static;
+    position: sticky;
     padding: 0;
+    top: 64px;
+    z-index: 99;
   }
 
   .filtersDiv {

_sass/elements/_search-bar.scss

@@ -13,15 +13,8 @@
 form#search-bar {
     position: sticky;
     padding: 10px;
-    top: 60px; 
-    z-index: 10;
-}
-// // Ensure search-bar does not pin on mobile
-@media #{$bp-below-tablet} {
-    form#search-bar {
-        position: static;
-    }
 }
+
 //Styles to override the styles from _forms.scss
 #search{
     padding-right: 0px;
@@ -53,4 +46,10 @@ form#search-bar {
     padding: 0;
     margin: 0;
     border: none;
+}
+
+@media #{$bp-below-tablet} {
+    form#search-bar {
+        padding: 10px;
+    }
 }