← back to Rentv 2026
Sitewide nav: collapse all tab strips into a hamburger + center the logo
9d3b82a9b7ef919b482713c40a04364f4ea9de7b · 2026-08-06 10:12:39 -0700 · Steve Abrams
Steve: 'all tabs on every page need hamburger for a cleaner look. Center logo on topline.'
- rentv-nav.js: retire the horizontal region/section strip everywhere (kept hidden as the
drawer data source). Masthead pages (blog/markets/article/review/about) now get an injected
left hamburger + drawer (Explore + Regions/Sections) and their OWN horizontal nav bar is
hidden; header.top pages keep their native burger+drawer. Wordmark centered on the top line
across masthead pages (secondary edition/date text dropped so it truly centers).
- map.html: center the wordmark on its top line too; mark its drawer data-own-nav so the
sitewide nav doesn't double up.
Verified across mast + top pages: one hamburger each, no horizontal nav, logo centered, 0 errors.
TK-10284
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Files touched
M public/map.htmlM public/rentv-nav.js
Diff
commit 9d3b82a9b7ef919b482713c40a04364f4ea9de7b
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Aug 6 10:12:39 2026 -0700
Sitewide nav: collapse all tab strips into a hamburger + center the logo
Steve: 'all tabs on every page need hamburger for a cleaner look. Center logo on topline.'
- rentv-nav.js: retire the horizontal region/section strip everywhere (kept hidden as the
drawer data source). Masthead pages (blog/markets/article/review/about) now get an injected
left hamburger + drawer (Explore + Regions/Sections) and their OWN horizontal nav bar is
hidden; header.top pages keep their native burger+drawer. Wordmark centered on the top line
across masthead pages (secondary edition/date text dropped so it truly centers).
- map.html: center the wordmark on its top line too; mark its drawer data-own-nav so the
sitewide nav doesn't double up.
Verified across mast + top pages: one hamburger each, no horizontal nav, logo centered, 0 errors.
TK-10284
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
public/map.html | 7 ++---
public/rentv-nav.js | 73 ++++++++++++++++++++++++++++++++++++++++++++++++++---
2 files changed, 73 insertions(+), 7 deletions(-)
diff --git a/public/map.html b/public/map.html
index 69296c1d..061d81f1 100644
--- a/public/map.html
+++ b/public/map.html
@@ -82,9 +82,10 @@ aside .ah{padding:12px 16px;border-bottom:1px solid var(--line);font-size:12px;f
/* ── Hamburger + drawer: all the nav tabs collapse in here so the map gets the screen ── */
.rentvtabs{display:none!important} /* injected region/section strip → moved into the drawer */
/* Minimal top bar: hamburger LEFT, wordmark, story count. Everything else lives in the drawer. */
-.mast{position:relative;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 58px}
-.mast .logo{font-size:26px}
+.mast{position:relative;display:flex;align-items:center;padding:12px 16px;min-height:52px}
+.mast .logo{position:absolute;left:50%;transform:translateX(-50%);font-size:26px;white-space:nowrap}
.cntpill{margin-left:auto;font-size:12px;font-weight:700;color:var(--sub);white-space:nowrap}
+@media(max-width:520px){.cntpill{display:none}}
.ham{position:absolute;left:14px;top:50%;transform:translateY(-50%);background:#fff;border:1.5px solid var(--line);border-radius:9px;font-size:17px;line-height:1;padding:8px 11px;cursor:pointer;color:var(--ink);z-index:5}
.ham:hover{border-color:var(--red);color:var(--red)}
.drawer{position:fixed;inset:0;z-index:4000;display:none}
@@ -113,7 +114,7 @@ aside .ah{padding:12px 16px;border-bottom:1px solid var(--line);font-size:12px;f
<a class="logo" href="/">REN<span>TV</span>.com<small>News Map</small></a>
<span class="cntpill" id="cnt"></span>
</header>
-<div class="drawer" id="drawer" aria-hidden="true">
+<div class="drawer" id="drawer" data-own-nav aria-hidden="true">
<div class="bd" id="drawerBd"></div>
<div class="pl">
<button class="x" id="drawerX" aria-label="Close menu">×</button>
diff --git a/public/rentv-nav.js b/public/rentv-nav.js
index 629de8f7..76a85e06 100644
--- a/public/rentv-nav.js
+++ b/public/rentv-nav.js
@@ -38,7 +38,33 @@
'.rentvtabs a.on{color:var(--red,#c8102e);box-shadow:inset 0 -2px 0 var(--red,#c8102e)}',
'.rentvtabs .rt-div{width:1px;height:14px;background:#e2e5e8;margin:0 4px;flex:none}',
'.drawer nav a.rt-parent{font-weight:800}',
- '@media(max-width:640px){.rentvtabs .rt-row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}.rentvtabs .rt-row::-webkit-scrollbar{display:none}}'
+ '@media(max-width:640px){.rentvtabs .rt-row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}.rentvtabs .rt-row::-webkit-scrollbar{display:none}}',
+ // The horizontal strip is retired for a cleaner look — it stays in the DOM (hidden) purely as
+ // the data source cloned into the hamburger drawer on masthead pages.
+ '.rentvtabs{display:none!important}',
+ // Injected hamburger + left drawer for masthead-chrome pages (header.mast with no drawer).
+ '.rtnav-ham{position:absolute;left:14px;top:50%;transform:translateY(-50%);background:#fff;border:1.5px solid var(--line,#e4e7ea);border-radius:9px;font-size:17px;line-height:1;padding:7px 11px;cursor:pointer;color:#14171a;z-index:20}',
+ '.rtnav-ham:hover{border-color:var(--red,#c8102e);color:var(--red,#c8102e)}',
+ '.rtnav-dr{position:fixed;inset:0;z-index:4000;display:none}.rtnav-dr.open{display:block}',
+ '.rtnav-bd{position:absolute;inset:0;background:rgba(0,0,0,.45)}',
+ '.rtnav-pl{position:absolute;top:0;left:0;width:min(86vw,300px);height:100%;background:#fff;overflow:auto;padding:18px 16px 44px;box-shadow:10px 0 44px rgba(0,0,0,.32)}',
+ '.rtnav-pl h3{font-family:"Playfair Display",serif;font-size:19px;margin:0 0 6px}.rtnav-pl h3 span{color:var(--red,#c8102e)}',
+ '.rtnav-x{position:absolute;top:12px;right:14px;font-size:24px;background:none;border:0;cursor:pointer;color:#5b636b;line-height:1}',
+ '.rtnav-gt{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#9aa2ab;margin:16px 0 6px}',
+ '.rtnav-pl>a{display:block;padding:9px 4px;border-bottom:1px solid var(--line,#e4e7ea);color:#14171a;font-weight:600;font-size:14.5px;text-decoration:none}',
+ '.rtnav-pl>a:hover{color:var(--red,#c8102e)}',
+ '.rtnav-clone .rt-in{display:block}',
+ '.rtnav-clone .rt-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 5px;margin-bottom:8px}',
+ '.rtnav-clone .rt-k{width:100%;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9aa2ab;margin:4px 0 2px}',
+ '.rtnav-clone .rt-div{display:none}',
+ '.rtnav-clone a{display:inline-block;padding:5px 8px;font-size:12.5px;background:var(--wash,#f5f6f8);border-radius:6px;font-weight:600;color:#2b3138;text-decoration:none}',
+ '.rtnav-clone a:hover{color:var(--red,#c8102e)}',
+ // Center the wordmark on masthead pages once the hamburger occupies the left.
+ 'header.mast.rtnav-has{position:relative;text-align:center}',
+ 'header.mast.rtnav-has .wrap{justify-content:center}',
+ 'header.mast.rtnav-has .logo,header.mast.rtnav-has a.brand,header.mast.rtnav-has .rentv-logo{margin-left:auto;margin-right:auto}',
+ // Drop secondary masthead text (edition line / date) so the wordmark sits truly centered.
+ 'header.mast.rtnav-has .wrap>*:not(a):not(.logo):not(.brand):not(.rentv-logo){display:none}'
].join('');
function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&', '<': '<', '>': '>', '"': '"' }[c]; }); }
@@ -96,7 +122,7 @@
// ---- 2) Mirror the region axis into the hamburger drawer (as a REGIONS group up top) ----
function buildDrawerGroup() {
var drawer = document.querySelector('.drawer');
- if (!drawer || drawer.querySelector('.rt-drawer-regions')) return;
+ if (!drawer || drawer.hasAttribute('data-own-nav') || drawer.querySelector('.rt-drawer-regions')) return;
var grp = document.createElement('div'); grp.className = 'grp rt-drawer-regions';
grp.innerHTML = '<div class="gt">Regions</div>';
var nav = document.createElement('nav');
@@ -115,6 +141,44 @@
else { drawer.appendChild(grp); drawer.appendChild(nav); }
}
+ // ---- 2b) Masthead-chrome pages (header.mast, no drawer) get a hamburger + left drawer so their
+ // nav collapses cleanly instead of showing the horizontal strip. header.top pages already
+ // have their own burger+drawer (buildDrawerGroup handles them); the map owns its nav. ----
+ function buildMastNav() {
+ var mast = document.querySelector('header.mast');
+ if (!mast) return; // not a masthead page
+ if (document.querySelector('.drawer')) return; // has its own drawer (map / header.top) — skip
+ if (document.querySelector('.rtnav-ham')) return; // idempotent
+ mast.classList.add('rtnav-has');
+ var ham = document.createElement('button');
+ ham.className = 'rtnav-ham'; ham.setAttribute('aria-label', 'Open menu'); ham.type = 'button'; ham.innerHTML = '☰';
+ mast.insertBefore(ham, mast.firstChild);
+ var strip = document.querySelector('.rentvtabs');
+ var dr = document.createElement('div'); dr.className = 'rtnav-dr'; dr.setAttribute('aria-hidden', 'true');
+ dr.innerHTML = '<div class="rtnav-bd"></div><div class="rtnav-pl">' +
+ '<button class="rtnav-x" type="button" aria-label="Close">×</button>' +
+ '<h3>REN<span>TV</span>.com</h3>' +
+ '<div class="rtnav-gt">Explore</div>' +
+ '<a href="/">Front page</a><a href="/map">🗺 News Map</a><a href="/markets">Markets</a>' +
+ '<a href="/review">The REview</a><a href="/cre-talk">CRE Talk</a><a href="/conferences">Conferences</a>' +
+ '<a href="/blog">Blog</a><a href="/about">About</a><a href="/advertise">Advertise</a><a href="/subscribe">Subscribe</a>' +
+ '<div class="rtnav-gt">Regions & Sections</div><div class="rtnav-clone">' + (strip ? strip.innerHTML : '') + '</div>' +
+ '</div>';
+ document.body.appendChild(dr);
+ // Hide the page's OWN horizontal nav bar (its links live in this drawer now). It's the first
+ // <nav> after the masthead; skip the injected (already-hidden) .rentvtabs strip.
+ var sib = mast.nextElementSibling;
+ while (sib && sib.tagName !== 'NAV') sib = sib.nextElementSibling;
+ if (sib && !sib.classList.contains('rentvtabs')) sib.style.display = 'none';
+ var open = function () { dr.classList.add('open'); dr.setAttribute('aria-hidden', 'false'); };
+ var close = function () { dr.classList.remove('open'); dr.setAttribute('aria-hidden', 'true'); };
+ ham.onclick = open;
+ dr.querySelector('.rtnav-x').onclick = close;
+ dr.querySelector('.rtnav-bd').onclick = close;
+ dr.addEventListener('click', function (e) { if (e.target.closest('a')) close(); });
+ document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });
+ }
+
// ---- 3) Refresh the wordmark into the 2026 liquid-glass RENTV logo (faithful to rentv.com) ----
function buildLogo() {
if (!document.getElementById('rentv-logo-css')) {
@@ -134,8 +198,9 @@
var st = document.createElement('style'); st.id = 'rentv-nav-css'; st.textContent = CSS;
document.head.appendChild(st);
buildLogo();
- buildStrip();
- buildDrawerGroup();
+ buildStrip(); // injects the (now hidden) strip → data source for the drawers
+ buildDrawerGroup(); // header.top pages: fold Regions into their existing drawer
+ buildMastNav(); // header.mast pages: add a hamburger + left drawer
}
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
else init();
← b14737eb fix(pr-intelligence): graceful 404 on people?id=<dead> — ope
·
back to Rentv 2026
·
docs: mark multi-tenant RLS isolation DONE + operational not 39ea230c →