← back to Designer Wallcoverings

novasuede: collapse all nav tabs into hamburger on right at every width (Novasuede brand name kept in banner)

3fb91caf27151f1e3b8199cad27e9ffaaf1218b9 · 2026-05-08 00:44:39 -0700 · Steve Abrams

Files touched

• M DW-Websites/Novasuede/index.html

Diff

commit 3fb91caf27151f1e3b8199cad27e9ffaaf1218b9
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Fri May 8 00:44:39 2026 -0700

    novasuede: collapse all nav tabs into hamburger on right at every width (Novasuede brand name kept in banner)
---
 DW-Websites/Novasuede/index.html | 37 +++++++++++++++++++++++++------------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/DW-Websites/Novasuede/index.html b/DW-Websites/Novasuede/index.html
index 13da13da..b95fcb9d 100644
--- a/DW-Websites/Novasuede/index.html
+++ b/DW-Websites/Novasuede/index.html
@@ -1401,16 +1401,31 @@
         .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; } }
+        /* All widths: hide nav by default, hamburger always visible on right, nav opens as right-anchored dropdown panel */
+        .ns-header { position: sticky; top: 0; }
+        .ns-nav {
+            display: none !important;
+            position: absolute; top: 100%; right: 18px;
+            flex-direction: column; align-items: stretch; gap: 0;
+            background: rgba(10,10,10,0.96); backdrop-filter: blur(10px);
+            border: 1px solid rgba(245,241,232,0.10); border-top: 0;
+            min-width: 220px; padding: 10px 0; margin: 0;
+            box-shadow: 0 16px 40px rgba(0,0,0,0.55);
+            z-index: 150;
+        }
+        .ns-nav.open { display: flex !important; }
+        .ns-nav a, .ns-nav button {
+            padding: 12px 22px !important;
+            border-bottom: 1px solid rgba(245,241,232,0.06);
+            width: 100%; text-align: left;
+            font-size: 15px !important;
+        }
+        .ns-nav a:last-child, .ns-nav button:last-child { border-bottom: 0; }
+        .ns-nav a:hover, .ns-nav button:hover { background: rgba(245,241,232,0.06) !important; color: #ffffff !important; }
+        .ns-header .mobile-toggle { display: flex !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; }
+          .ns-header { flex-wrap: nowrap; padding: 14px 18px; }
+          .ns-nav { right: 12px; min-width: 200px; }
         }
         .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; }
@@ -1547,9 +1562,7 @@
             display: block;
           }
         }
-        @media (min-width: 761px) {
-          header .mobile-toggle { display: none !important; }
-        }
+        /* (desktop hide-hamburger removed — hamburger now always visible on all widths) */
 
     </style>
     <div class="ns-modal" id="nsContactModal" role="dialog" aria-modal="true" aria-labelledby="nsContactTitle" onclick="if(event.target===this)nsContactClose()">

← 91d7a388 novasuede: REVERT theme-toggle change (broke layout) — resto  ·  back to Designer Wallcoverings  ·  wire archive-guard into 5 cron-driven Shopify activators 4a4a1040 →