WholeTech · internal worksheet · noindex

Header Conflicts — site-wide

Every public site rendered live in headless Chromium (1280×900) and measured for competing fixed/sticky top bars: overlaps, stacked height, whether page content clears the bars, and z-index. This is what the pages actually do in a browser — not a guess from the HTML.

The problem, in one paragraph

Over time the network accumulated several independently-injected bars that each assume they own the top of the page: the #promo-bar ("WholeTech Picks", on 169 sites, position:fixed; top:0; z-index:2147483647 — the maximum 32-bit value), a #wholetech-back link (58 sites, top:6px — literally inside the promo-bar's band), a #subnav-bar (47 sites, top:52px), each site's own .nav (108 sites, many position:sticky; top:0), plus an in-flow af-strip (130 sites) and vid-teaser (64 sites). The promo-bar ships a JavaScript routine that tries to push every other fixed/sticky element down and pad the body — but it runs once, races late-injected bars and sticky navs, and when it miscalculates, two opaque bars land in the same vertical space (overlap) or the body padding is too small and real content hides behind the stack. The table below flags exactly which sites that happens on.

What each column means
  • SeverityHigh = bars overlap each other and/or content is hidden behind them; Med = 3+ stacked bars or >110px of stacked chrome (cramped but not broken); OK = clean; Failed = site didn't load.
  • Bars — count of opaque, full-width fixed/sticky bars in the top 200px (overlays/backgrounds excluded).
  • Overlaps — pairs of those bars whose vertical ranges intersect >4px (one is drawn on top of the other).
  • Stacked px — total height of the top-bar band.
  • Content clear? — does body padding clear the pinned bars, or is content hidden underneath? (No = hidden.)
  • Max z — highest z-index found; 2147483647 is the promo-bar pinning itself above everything, including legitimate site modals.

Click any row for the per-bar breakdown and a screenshot of that site's top band.

Proposed solution — one coordinated header stack

Replace the N independent fixed bars + the fragile per-bar offset script with a single owner of the top edge:

1 · One fixed container, ordered children

A single #wt-stack at top:0 holds the network chrome (promo picks, back-link, subnav) as stacked children that flow vertically — so they can never overlap each other. One element, one z-index.

2 · Measure once, expose a variable

A ResizeObserver on #wt-stack sets --wt-stack-h on :root. The body uses padding-top:var(--wt-stack-h) and scroll-padding-top:var(--wt-stack-h). Content always clears the stack, at any width, automatically — no per-element scanning, no race.

3 · Site navs pin below the stack

Each site's sticky .nav uses top:var(--wt-stack-h) instead of top:0, so it pins directly under the network chrome instead of fighting it for top:0.

4 · Sane z-index scale

Retire z-index:2147483647. Use a documented scale: stack 1000, site nav 900, site modals 2000 (so a site's own dialogs can sit above the promo chrome when needed).

5 · One injector, verified by this harness

Collapse the separate promo-bar / back-link / subnav injectors into a single idempotent rollout, then re-run this exact Playwright audit to confirm 0 overlaps and Content-clear = Yes network-wide before and after. The worksheet becomes the regression test.

High Med OK Failed
# Site Severity Bars Overlaps Stacked px Content clear? Max z Top bars
Loading audit data…