Layout: Adapt to static elastic-nav by making secondary nav sticky

[reakaleek]

What

Adapt to the global elastic-nav.js (v2026-03) changing the header from position: fixed to position: static.

Why

The elastic global nav now scrolls with the page instead of staying fixed. Our --offset-top values assumed a fixed header, causing a ~118px empty gap above sticky sidebars when scrolled.

How

• Make the secondary docs nav ("Docs | Release notes | Troubleshoot | Reference") sticky at the top
• Simplify --offset-top to match the secondary nav height (72px) instead of the old responsive header breakpoints
• Remove the now-unnecessary #elastic-nav-wrapper min-height rule

Test plan

• Visit any docs page (e.g. Ingest Pipelines)
• Scroll down past the global elastic nav
• Verify the secondary nav sticks to the top of the viewport
• Verify sidebars sit flush below the secondary nav with no gap
• Verify anchor link scroll-margin still works correctly

🤖 Generated with Claude Code

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 7ddde1ab-15f6-466a-8232-ee02f65cd127

📥 Commits

Reviewing files that changed from the base of the PR and between d7406d4 and b1dcfea.

📒 Files selected for processing (2)

• src/Elastic.ApiExplorer/_Layout.cshtml
• src/Elastic.Markdown/_Layout.cshtml

✅ Files skipped from review due to trivial changes (1)

• src/Elastic.ApiExplorer/_Layout.cshtml

---

📝 Walkthrough

Walkthrough

Global CSS: simplified --offset-top — base :root { --offset-top: 0px } and a single @media (min-width: 768px) override --offset-top: calc(var(--spacing) * 18). Removed older breakpoint overrides and the #elastic-nav-wrapper { min-height: var(--offset-top) } rule; body.air-gapped { --offset-top: 48px } remains. Layout changes: _SecondaryNav.cshtml outer div now has md:sticky md:top-0 md:z-30 bg-grey-10 and nav uses bg-grey-10 border-b border-grey-20. _Layout.cshtml in ApiExplorer and Markdown removed conditional border-t-1 border-grey-20 from #main-container.

Suggested labels

enhancement, redesign

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adapting layouts to handle a static elastic-nav by making the secondary nav sticky.
Description check	✅ Passed	The description clearly explains what changed, why it was necessary, how it was implemented, and includes a concrete test plan aligned with the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

✨ Simplify code

• Create PR with simplified code
• Commit simplified code in branch invincible-molecule

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}