← back to Commercialrealestate

corner-nav: reserve header corner space in CSS (timing-independent) so the ☰ Menu burger never overlaps the page title

3c0d9749eda4dbd60c5780cd58bee183c25d8338 · 2026-08-26 10:14:59 -0700 · Steve Abrams

Files touched

• M public/corner-nav.js

Diff

commit 3c0d9749eda4dbd60c5780cd58bee183c25d8338
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed Aug 26 10:14:59 2026 -0700

    corner-nav: reserve header corner space in CSS (timing-independent) so the ☰ Menu burger never overlaps the page title
---
 public/corner-nav.js | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/public/corner-nav.js b/public/corner-nav.js
index 6ab6be4..2c968c8 100644
--- a/public/corner-nav.js
+++ b/public/corner-nav.js
@@ -42,6 +42,12 @@
     '.cnav-burger:hover{border-color:#C8A24B;color:#C8A24B;}' +
     '.cnav-burger.left{left:10px;} .cnav-burger.right{right:10px;}' +
     '.cnav-burger .lbl{font-size:12px;letter-spacing:.3px;} @media(max-width:640px){.cnav-burger .lbl{display:none;}}' +
+    /* Reserve corner space in CSS (timing-independent — holds even if reserve() JS never runs, or */
+    /* runs before/after a page re-render). The header title can NEVER underlap the fixed burgers. */
+    /* --cnav-rsv-l / -r are refined by reserve() from the burgers' real measured width; these are  */
+    /* the safe fallbacks (burger left:10 + ~120 wide label pill + 16 gap, and right ~140 + gap).   */
+    'body.cnav-on header{padding-left:var(--cnav-rsv-l,132px)!important;padding-right:var(--cnav-rsv-r,148px)!important;}' +
+    '@media(max-width:640px){body.cnav-on header{padding-left:var(--cnav-rsv-l,52px)!important;padding-right:var(--cnav-rsv-r,52px)!important;}}' +
     '.cnav-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9998;opacity:0;pointer-events:none;transition:opacity .18s;}' +
     '.cnav-ov.on{opacity:1;pointer-events:auto;}' +
     '.cnav-drawer{position:fixed;top:0;bottom:0;width:var(--cnav-w,min(330px,88vw));background:#11161f;color:#e6e8ec;z-index:9999;' +
@@ -293,11 +299,21 @@
   burger('right', '▤', 'Sections', buildOnThisPage);
 
   // Reserve corner space on the top bar so its title / remaining controls clear the burgers.
+  // Two layers: (1) the body.cnav-on CSS rule above reserves a safe fallback the instant this
+  // script runs (timing-independent — no dependence on when reserve() fires); (2) reserve() then
+  // refines the reservation from the burgers' REAL measured geometry so the gap is comfortable and
+  // scales with label width / font zoom instead of relying on a magic 104px that could go too tight.
   function reserve() {
     var bar = document.querySelector('header'); if (!bar) return;
-    var cs = getComputedStyle(bar);
-    bar.style.paddingLeft = Math.max(parseInt(cs.paddingLeft, 10) || 0, 104) + 'px';
-    bar.style.paddingRight = Math.max(parseInt(cs.paddingRight, 10) || 0, 120) + 'px';
+    document.body.classList.add('cnav-on');           // engage the CSS reservation rule
+    var GAP = 22;                                       // comfortable clearance between burger + title
+    var lb = document.querySelector('.cnav-burger.left');
+    var rb = document.querySelector('.cnav-burger.right');
+    // measured need = burger's outer edge + gap (falls back to the CSS default if not yet laid out)
+    var needL = lb ? Math.ceil(lb.getBoundingClientRect().right + GAP) : 0;
+    var needR = rb ? Math.ceil(window.innerWidth - rb.getBoundingClientRect().left + GAP) : 0;
+    if (needL > 0) document.documentElement.style.setProperty('--cnav-rsv-l', needL + 'px');
+    if (needR > 0) document.documentElement.style.setProperty('--cnav-rsv-r', needR + 'px');
   }
   // Fold old horizontal top-tabs into the hamburgers: hide inter-page nav LINKS in the header
   // (every destination lives in the ☰ menu) but LEAVE page controls (sliders, buttons, selects).
@@ -319,4 +335,8 @@
   }
   function apply() { reserve(); hideTopTabs(); }
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', apply); else apply();
+  // Re-measure once fonts/layout settle (label pill width can change after webfont load) and on
+  // resize / orientation change, so the reservation always tracks the burgers' real width.
+  window.addEventListener('load', reserve);
+  var rTo; window.addEventListener('resize', function () { clearTimeout(rTo); rTo = setTimeout(reserve, 120); });
 })();

← 68140d8 chore: broker-extract helper + two-section pool/land report,  ·  back to Commercialrealestate  ·  corner-nav: widen ☰ Menu pill padding-x to 16px so 'Menu' la d13e16d →