header: tighten hamburger drawer (0.9rem/5px), +top padding above wordmark, branding pointer-events guard so it can't block search click

116a2c78ce4a9e5fc8c9b1da7bd50787bd1ce37c · 2026-07-15 10:24:56 -0700 · Steve Abrams

Files touched

M assets/custom.css

Diff

commit 116a2c78ce4a9e5fc8c9b1da7bd50787bd1ce37c
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed Jul 15 10:24:56 2026 -0700

    header: tighten hamburger drawer (0.9rem/5px), +top padding above wordmark, branding pointer-events guard so it can't block search click
---
 assets/custom.css | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/assets/custom.css b/assets/custom.css
index e15647d..8ae117b 100644
--- a/assets/custom.css
+++ b/assets/custom.css
@@ -1471,6 +1471,8 @@ input.add-to-cart:hover,
    left-aligned width caps. */
 .header-main-content {
   position: relative;
+  padding-top: 20px !important;   /* more breathing room above the centered wordmark */
+  padding-bottom: 10px !important;
 }
 .header-branding-desktop {
   position: absolute !important;
@@ -1482,9 +1484,11 @@ input.add-to-cart:hover,
   margin: 0 !important;
   text-align: center !important;
   z-index: 5;
+  pointer-events: none;   /* the centered branding box must never intercept eyeglass/icon clicks */
 }
 .header-branding-desktop .logo-link {
   justify-content: center !important;
+  pointer-events: auto;   /* but the logo itself stays clickable (links home) */
 }
 
 /* Right cluster horizontal at ALL widths (theme only made it flex under 1080px,
@@ -1505,17 +1509,29 @@ input.add-to-cart:hover,
   max-width: none !important;
 }
 
-/* ---- Hamburger drawer: +50% text, panel widened to fit ---- */
+/* ---- Hamburger drawer: tight, compact menu ---- */
 .navigation.navigation-mobile .navigation-menu a {
-  font-size: 1.5em;   /* 50% larger than the current drawer link size */
+  font-size: 0.9rem !important;
+  padding: 5px 0 !important;
+  letter-spacing: 0.02em !important;
+  line-height: 1.25 !important;
+}
+.navigation.navigation-mobile .navigation-menu > li {
+  padding: 0 !important;
+}
+.navigation.navigation-mobile .navigation-menu .mobile-nav-divider {
+  margin: 3px 0 !important;
+}
+.navigation.navigation-mobile .navigation-menu {
+  padding: 0 18px !important;
 }
 .navigation.navigation-mobile {
-  max-width: 560px;               /* widened so larger items (e.g. "Apply for a Trade Account") don't wrap */
-  transform: translateX(-100%);   /* stay fully hidden when closed regardless of new width */
+  max-width: 320px;               /* tighter panel to match the smaller text */
+  transform: translateX(-100%);   /* stay fully hidden when closed regardless of width */
 }
 @media (max-width: 599px) {
   .navigation.navigation-mobile {
-    max-width: 88vw;
+    max-width: 82vw;
   }
 }

← 1690a77 header: dead-center the logo/wordmark on all viewports (abso · back to Dw Theme Hamburger · search: add type-ahead predictive dropdown (Shopify /search/ fc9ece5 →