← back to Dw Theme Hamburger
header: Times New Roman stacked wordmark (logo-height); move cart next to search eyeglass; click-to-expand search (~20ch, grows left)
5ea5861e9e27c5bf3cff9b012fb26a3bf6cf412d · 2026-07-14 13:19:34 -0700 · Steve Abrams
Files touched
M assets/custom.cssM sections/header.liquid
Diff
commit 5ea5861e9e27c5bf3cff9b012fb26a3bf6cf412d
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Tue Jul 14 13:19:34 2026 -0700
header: Times New Roman stacked wordmark (logo-height); move cart next to search eyeglass; click-to-expand search (~20ch, grows left)
---
assets/custom.css | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++
sections/header.liquid | 45 +++++++++++++++++++++++++++++--------------
2 files changed, 83 insertions(+), 14 deletions(-)
diff --git a/assets/custom.css b/assets/custom.css
index 0f42e33..5bda156 100644
--- a/assets/custom.css
+++ b/assets/custom.css
@@ -1379,3 +1379,55 @@ input.add-to-cart:hover,
width: auto;
height: auto;
}
+
+/* Wordmark: Times New Roman, stacked 2 lines, ~as tall as the logo.
+ !important + 2-class specificity beats the global span{sans-serif!important} override. */
+.header-branding .header-wordmark {
+ font-family: "Times New Roman", Times, serif !important;
+ font-size: 21px;
+ line-height: 1.1;
+ letter-spacing: 0.06em;
+ white-space: normal;
+ text-align: left;
+}
+@media (max-width: 539px) {
+ .header-branding .header-wordmark {
+ font-size: 15px;
+ letter-spacing: 0.04em;
+ }
+}
+
+/* ---- Click-to-expand header search ----
+ Eyeglass visible at all widths; the search field is collapsed until the
+ eyeglass is clicked (.search-open), then grows leftward to ~20 characters.
+ The right cluster is right-anchored, so expanding the field reads as
+ growing toward the left. */
+.header-content-right .search-toggle {
+ display: inline-flex !important;
+ align-items: center;
+ cursor: pointer;
+}
+.header-search-inline .search-form {
+ max-width: 0;
+ overflow: hidden;
+ opacity: 0;
+ transition: max-width 0.28s ease, opacity 0.18s ease;
+}
+.header-content-right--inline-search.search-open .header-search-inline .search-form {
+ max-width: 24ch;
+ opacity: 1;
+ overflow: visible;
+}
+.header-search-inline .search-form__input {
+ width: 20ch;
+ max-width: 20ch;
+}
+@media (max-width: 539px) {
+ .header-content-right--inline-search.search-open .header-search-inline .search-form {
+ max-width: 62vw;
+ }
+ .header-search-inline .search-form__input {
+ width: 100%;
+ max-width: none;
+ }
+}
diff --git a/sections/header.liquid b/sections/header.liquid
index 39246bc..d6a16fb 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -86,14 +86,6 @@
</div>
{% endif %}
- <div class="mini-cart-wrapper">
- <a class="cart-count header-icon-link" href="{{ routes.cart_url }}" data-cart-count aria-label="{{ 'layout.header.cart' | t }}" title="{{ 'layout.header.cart' | t }}">
- <span class="cart-count-icon">{% render 'icons', id: 'cart' %}</span>
- <span class="cart-count-number">{{ cart.item_count }}</span>
- </a>
-
- {% render 'mini-cart' %}
- </div>
<form class="checkout-link" action="{{ routes.cart_url }}" method="POST"><button class="checkout-link__button" type="submit" name="checkout">{{ 'layout.header.checkout' | t }}</button></form>
</div>
@@ -135,7 +127,7 @@
size: '200x100',
focal_point: section.settings.logo.presentation.focal_point,
%}
- <span class="header-wordmark">Designer Wallcoverings</span>
+ <span class="header-wordmark">Designer<br>Wallcoverings</span>
{%- else -%}
<h1>{{- shop.name -}}</h1>
{%- endif -%}
@@ -305,10 +297,11 @@
</div>
<button
- class="search-toggle"
+ class="search-toggle header-icon-link"
type="button"
aria-label="{{ 'general.search.header' | t }}"
- data-header-search-toggle
+ aria-expanded="false"
+ data-quick-search-toggle
>
{%
render 'icons',
@@ -316,12 +309,14 @@
%}
</button>
- {% if section.settings.sticky_header %}
- <a class="sticky-header-cart-count header-icon-link" href="{{ routes.cart_url }}" data-cart-count aria-label="{{ 'layout.header.cart' | t }}" title="{{ 'layout.header.cart' | t }}">
+ <div class="mini-cart-wrapper">
+ <a class="cart-count header-icon-link" href="{{ routes.cart_url }}" data-cart-count aria-label="{{ 'layout.header.cart' | t }}" title="{{ 'layout.header.cart' | t }}">
<span class="cart-count-icon">{% render 'icons', id: 'cart' %}</span>
<span class="cart-count-number">{{ cart.item_count }}</span>
</a>
- {% endif %}
+
+ {% render 'mini-cart' %}
+ </div>
</div>
<div class="search-takeover" data-search-takeover>
@@ -348,6 +343,28 @@
</header>
</section>
+<script>
+ (function () {
+ var root = document.querySelector('[data-section-header] .header-content-right--inline-search');
+ if (!root) return;
+ var toggle = root.querySelector('[data-quick-search-toggle]');
+ var input = root.querySelector('.search-form__input');
+ if (!toggle) return;
+ function close() {
+ root.classList.remove('search-open');
+ toggle.setAttribute('aria-expanded', 'false');
+ }
+ toggle.addEventListener('click', function (e) {
+ e.preventDefault();
+ var open = root.classList.toggle('search-open');
+ toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+ if (open && input) { setTimeout(function () { input.focus(); }, 60); }
+ });
+ document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });
+ document.addEventListener('click', function (e) { if (!root.contains(e.target)) close(); });
+ })();
+</script>
+
{% schema %}
{
"name": "Header",
← f5f8bf1 header: reduce centered front-page logo (100->70px) + hambur
·
back to Dw Theme Hamburger
·
header: move Checkout button down next to the cart 2dad905 →