← back to Flockedwallpaper
Hamburger always visible on right — propagated from novasuede a815690
f426863536e4356da2b2b8da8d3ff845d54d12ad · 2026-05-08 07:35:37 -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 f426863536e4356da2b2b8da8d3ff845d54d12ad
Author: Steve <steve@designerwallcoverings.com>
Date: Fri May 8 07:35:37 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 0d23170..851eb65 100644
--- a/index.html
+++ b/index.html
@@ -95,18 +95,16 @@ footer .footer-desc{font-weight:300;font-size:12px;color:var(--gray);line-height
.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; }
@@ -221,29 +219,24 @@ footer .footer-desc{font-weight:300;font-size:12px;color:var(--gray);line-height
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>
@@ -307,6 +300,10 @@ footer .footer-desc{font-weight:300;font-size:12px;color:var(--gray);line-height
+
+
+
+
<!-- Header -->
<header class="header">
<button class="icon-btn" onclick="document.getElementById('nav-menu').style.display='flex'">
← f7432b6 initial scaffold + ns-header + Atelier rebrand + sort/densit
·
back to Flockedwallpaper
·
snapshot before fleet-grid refine tick 4 ef423f3 →