Skip to content

Sidecar divider runs through a transparent Nova Header (no header-neighbour top offset) #683

Open

Description

@georgeolaru

Problem

The Sidecar's divider rule (.nb-sidecar--has-rule::before, shipped in #658) draws from the very top of the .nb-sidecar grid container. On desktop, the Nova Header always overlays the block that follows it, so when a Sidecar is that neighbour and the header's background is transparent (the default), the divider runs straight through the header — across the logo and the navigation — instead of starting where the Sidecar's actual content begins.

Root cause

The divider has no top offset.
packages/block-library/src/blocks/sidecar/scss/_desktop-layout.scss:246-261:

.nb-sidecar--has-rule::before {
  content: "";
  grid-row: 1;
  grid-column: gs / ge;
  align-self: stretch;
  ...
}

All .nb-sidecar-area children share grid-row: 1 (line 18), so this is a single-row grid — align-self: stretch makes the ::before span the entire .nb-sidecar box, top to bottom.

The header's overlay offset is never applied to that box.
packages/block-library/src/blocks/header/frontend/components/index.js:

  • Line 33 (and 73): the block after the header gets nb-header-neighbour and, via findPaddingTopTargets (line 288-330), a --nb-header-neighbour-padding-top inline padding-top — enough to clear the absolutely-positioned header (lines 164-175).
  • For a .nb-sidecar neighbour, findPaddingTopTargets (line 290-308) does not return the .nb-sidecar element itself. It walks into the sidecar and returns the content area's first child plus the sidebar area children (line 305: [...contentTargets, ...sidebarTargets]). So the padding-top that clears the header lands on the content/sidebar children, pushing the logo/nav/article text down — while the .nb-sidecar container (which owns the ::before divider) never receives any offset and keeps starting at top: 0.

The result: content is correctly pushed below the header, but the divider stays anchored to the untouched top of the container, so it visibly crosses the header band above the pushed-down content.

Repro

Hive LT starter, single post template, Sidecar with a right rail and Divider: Secondary, Nova Blocks 2.7.1, Anima LT 2.0.51, default (transparent) header background.
https://starter.pixelgrade.com/hive-lt/ — any single post.

At 1440:

  • Sidecar box starts at y=12.
  • Header-neighbour padding-top applied to the content/sidebar children: 479.7px.
  • Divider line visible at x=955, running from y=12 straight through the header's logo/nav band, well above where the (correctly offset) content starts.

Workaround in use: setting the Header's backgroundMode to "solid" (opaque header) hides the overlap, but that's a workaround, not a fix — it doesn't work for a transparent-header design.

Expected

When the Sidecar is a header neighbour, the divider should start at the content, not at the raw top of the grid container — i.e. offset by var(--nb-header-neighbour-padding-top), the same amount already applied to the content/sidebar children. (For reference, classic Hive's rule starts below the nav, not at the very top of the page.)

Evidence

Found while building the Hive LT starter: /Users/georgeolaru/Developer/pixelsite-hive-lt/docs/plans/hive-lt-starter/work/p3/REPORT.md, "Round 5" (2026-09-28).

Related

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions