← back to Dw Theme Hamburger

search: theme search-form (Boost-survives + functional) forced to 20ch expand from eyeglass

ac3f2559ad26fda3fc535ccf63ef4645c9195794 · 2026-07-15 09:49:19 -0700 · Steve Abrams

Files touched

• M assets/custom.css
• M sections/header.liquid

Diff

commit ac3f2559ad26fda3fc535ccf63ef4645c9195794
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed Jul 15 09:49:19 2026 -0700

    search: theme search-form (Boost-survives + functional) forced to 20ch expand from eyeglass
---
 assets/custom.css      | 51 +++++++++++++++++++++++++-------------------------
 sections/header.liquid | 37 ++++++++++++++++--------------------
 2 files changed, 42 insertions(+), 46 deletions(-)

diff --git a/assets/custom.css b/assets/custom.css
index cc4e25b..2c033c2 100644
--- a/assets/custom.css
+++ b/assets/custom.css
@@ -1418,41 +1418,42 @@ input.add-to-cart:hover,
   cursor: pointer;
   order: 2;
 }
-.header-quick-search .hdr-qs-input {
+.header-quick-search .search-form {
   order: 1;
-  box-sizing: border-box;
-  width: 20ch;
+  margin: 0;
   max-width: 0;
-  padding: 0;
-  border: 0 solid rgba(0, 0, 0, 0.28);
-  border-radius: 4px;
-  background: #fff;
-  color: #111;
-  font-size: 14px;
-  line-height: 1.5;
-  white-space: nowrap;
-  opacity: 0;
   overflow: hidden;
+  opacity: 0;
   pointer-events: none;
-  outline: none;
-  transition: max-width 0.3s ease, opacity 0.2s ease, padding 0.2s ease, border-width 0.2s ease;
+  transition: max-width 0.3s ease, opacity 0.2s ease;
 }
-.header-quick-search.search-open .hdr-qs-input {
-  max-width: 20ch;
-  padding: 6px 10px;
-  border-width: 1px;
+.header-quick-search.search-open .search-form {
+  max-width: 26ch;
+  overflow: visible;
   opacity: 1;
   pointer-events: auto;
 }
-.header-quick-search .hdr-qs-input:empty::before {
-  content: attr(data-placeholder);
-  color: #888;
-  pointer-events: none;
+.header-quick-search .search-form__field {
+  width: auto !important;
+  margin: 0 !important;
+}
+.header-quick-search .search-form__input {
+  width: 20ch !important;
+  max-width: none !important;
+  padding: 6px 10px !important;
+  border: 1px solid rgba(0, 0, 0, 0.28) !important;
+  border-radius: 4px !important;
+  background: #fff !important;
+}
+.header-quick-search .search-form__submit-button {
+  display: none !important;
 }
 @media (max-width: 539px) {
-  .header-quick-search.search-open .hdr-qs-input {
-    max-width: 60vw;
-    width: 60vw;
+  .header-quick-search.search-open .search-form {
+    max-width: 62vw;
+  }
+  .header-quick-search .search-form__input {
+    width: 100% !important;
   }
 }
 
diff --git a/sections/header.liquid b/sections/header.liquid
index 6796198..4905611 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -298,14 +298,10 @@
               id: 'search',
             %}
           </button>
-          <div
-            class="hdr-qs-input"
-            data-quick-search-input
-            contenteditable="true"
-            role="textbox"
-            aria-label="{{ 'general.search.header' | t }}"
-            data-placeholder="{{ 'general.search.header' | t }}"
-          ></div>
+          {%
+            render 'search-form',
+            context: 'header',
+          %}
         </div>
 
         <a href="#" class="visual-search-clickable header-search-inline__visual" aria-controls="Visual Search">
@@ -351,26 +347,25 @@
     var wrap = document.querySelector('[data-section-header] [data-quick-search]');
     if (!wrap) return;
     var toggle = wrap.querySelector('[data-quick-search-toggle]');
-    var input = wrap.querySelector('[data-quick-search-input]');
-    if (!toggle || !input) return;
+    if (!toggle) return;
+    function q() { return wrap.querySelector('.search-form__input'); }
+    function frm() { return wrap.querySelector('form'); }
     function close() {
       wrap.classList.remove('search-open');
       toggle.setAttribute('aria-expanded', 'false');
     }
-    function val() { return (input.textContent || '').trim(); }
-    function submitSearch() {
-      var v = val();
-      if (v) window.location.href = '/search?q=' + encodeURIComponent(v);
-    }
     toggle.addEventListener('click', function (e) {
       e.preventDefault();
-      // open with text -> submit; otherwise toggle the field open/closed
-      if (wrap.classList.contains('search-open') && val()) { submitSearch(); return; }
-      var open = wrap.classList.toggle('search-open');
-      toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
-      if (open) { setTimeout(function () { input.focus(); }, 60); }
+      var input = q(), form = frm();
+      if (wrap.classList.contains('search-open')) {
+        if (input && input.value.trim() && form) { form.submit(); return; }
+        close();
+        return;
+      }
+      wrap.classList.add('search-open');
+      toggle.setAttribute('aria-expanded', 'true');
+      if (input) { setTimeout(function () { input.focus(); }, 60); }
     });
-    input.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); submitSearch(); } });
     document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });
     document.addEventListener('click', function (e) { if (!wrap.contains(e.target)) close(); });
   })();

← 1703a96 search: contenteditable div field (Boost strips <input> but  ·  back to Dw Theme Hamburger  ·  header: right cluster flex at all widths (was stacking on de 4803440 →