← back to Glassbeadedwallpaper
Hamburger always visible on right — propagated from novasuede a815690
6e696de39ebd14b84529fe588de8c493e84856c3 · 2026-05-08 07:35:22 -0700 · Steve
Standing rule (~/.claude/skills/dw-site-build/SKILL.md): hamburger ALWAYS
visible on the right, inline nav collapses to drop-panel at all widths.
Same edit as novasuede + silkwallcoverings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Files touched
Diff
commit 6e696de39ebd14b84529fe588de8c493e84856c3
Author: Steve <steve@designerwallcoverings.com>
Date: Fri May 8 07:35:22 2026 -0700
Hamburger always visible on right — propagated from novasuede a815690
Standing rule (~/.claude/skills/dw-site-build/SKILL.md): hamburger ALWAYS
visible on the right, inline nav collapses to drop-panel at all widths.
Same edit as novasuede + silkwallcoverings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
index.html | 65 ++++++++++++++++++++++++++++++--------------------------------
1 file changed, 31 insertions(+), 34 deletions(-)
diff --git a/index.html b/index.html
index 3d79a71..8699033 100644
--- a/index.html
+++ b/index.html
@@ -93,18 +93,16 @@
.ns-nav { display: flex; gap: 32px; align-items: center; list-style: none; padding: 0; margin: 0; }
.ns-nav a, .ns-nav button { font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; font-size: 15px !important; font-weight: 400 !important; color: #f5f1e8 !important; text-decoration: none !important; background: none !important; border: 0 !important; cursor: pointer; padding: 0 !important; transition: color 200ms; letter-spacing: 0 !important; text-transform: none !important; }
.ns-nav a:hover, .ns-nav button:hover { color: #ffffff !important; }
- @media (max-width: 820px) { .ns-header { padding: 14px 18px; } .ns-nav { gap: 16px; } .ns-nav a, .ns-nav button { font-size: 13px !important; } }
- @media (max-width: 760px) {
- .ns-header { flex-wrap: wrap; }
- .ns-nav { display: none !important; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0 4px; }
- .ns-nav.open { display: flex !important; }
- .ns-nav a, .ns-nav button { padding: 10px 0 !important; border-bottom: 1px solid rgba(245,241,232,0.08); width: 100%; text-align: left; }
- .ns-nav a:nth-child(n+5), .ns-nav button:nth-child(n+5) { display: block !important; }
- .ns-header .mobile-toggle { display: flex !important; }
- }
- @media (min-width: 761px) {
- .ns-header .mobile-toggle { display: none !important; }
- }
+ /* Standing UX (2026-05-08 Steve directive): hamburger ALWAYS visible
+ on the right at all viewports. Inline ns-nav collapses into the
+ drop-panel under the header on click. Premium-minimal pattern.
+ Reflected as standing rule in ~/.claude/skills/dw-site-build/SKILL.md. */
+ .ns-header { flex-wrap: wrap; }
+ .ns-nav { display: none !important; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0 4px; }
+ .ns-nav.open { display: flex !important; }
+ .ns-nav a, .ns-nav button { padding: 10px 0 !important; border-bottom: 1px solid rgba(245,241,232,0.08); width: 100%; text-align: left; }
+ .ns-header .mobile-toggle { display: flex !important; }
+ @media (max-width: 820px) { .ns-header { padding: 14px 18px; } }
.ns-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 200; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(6px); }
.ns-modal.show { display: flex; }
.ns-modal-card { max-width: 460px; width: 100%; background: #141414 !important; border: 1px solid rgba(245,241,232,0.14); border-radius: 6px; padding: 28px 30px 30px; position: relative; }
@@ -219,29 +217,24 @@
margin-top: 12px !important;
}
- /* ─── Mobile hamburger nav (replaces the overflow at <760px) ─── */
- @media (max-width: 760px) {
- header .nav-container { flex-wrap: wrap; }
- header nav { display: none; flex-basis: 100%; flex-direction: column; gap: 6px; padding: 16px 0 6px; }
- header nav.open { display: flex; }
- header nav a { padding: 10px 0; border-bottom: 1px solid rgba(245,241,232,0.1); }
- header .mobile-toggle {
- display: flex !important;
- flex-direction: column;
- gap: 5px;
- background: transparent;
- border: 0;
- cursor: pointer;
- padding: 8px;
- }
- header .mobile-toggle span {
- width: 22px; height: 1.5px;
- background: #f5f1e8;
- display: block;
- }
+ /* Hamburger button — ALWAYS visible on the right (Steve 2026-05-08). */
+ header .nav-container { flex-wrap: wrap; }
+ header nav { display: none; flex-basis: 100%; flex-direction: column; gap: 6px; padding: 16px 0 6px; }
+ header nav.open { display: flex; }
+ header nav a { padding: 10px 0; border-bottom: 1px solid rgba(245,241,232,0.1); }
+ header .mobile-toggle {
+ display: flex !important;
+ flex-direction: column;
+ gap: 5px;
+ background: transparent;
+ border: 0;
+ cursor: pointer;
+ padding: 8px;
}
- @media (min-width: 761px) {
- header .mobile-toggle { display: none !important; }
+ header .mobile-toggle span {
+ width: 22px; height: 1.5px;
+ background: #f5f1e8;
+ display: block;
}
</style>
@@ -304,6 +297,10 @@
+
+
+
+
<!-- Header -->
<header class="header">
<div class="header-content">
← afbb31a Server-side brand-scrub on /api/products (PG read)
·
back to Glassbeadedwallpaper
·
apply R1+R2+R4 hero standing rules — strip Maison Lustre, lo 2f653bf →