Nav Spacer

Place k-nav-spacer immediately after a <k-nav fixed> element. It automatically measures the nav's height using a ResizeObserver and sets its own height to match, ensuring page content is not hidden behind the fixed nav. A default bottom margin of var(--spacer) separates the spacer from the content below; override it with kempo-css margin utilities like mb0, mbh, etc.

Basic Usage

Place k-nav-spacer directly after the fixed nav in your HTML. It will size itself to match the nav height.

<k-nav fixed>
  <!-- nav content -->
</k-nav>
<k-nav-spacer></k-nav-spacer>
<main>
  <!-- page content -->
</main>

No Margin

Add mb0 to remove the default bottom margin, or use any kempo-css margin utility to customise it.

<k-nav-spacer class='mb0'></k-nav-spacer>

JavaScript Reference

Constructor

Extends ShadowComponent

new NavSpacer()

Requirements

• ShadowComponent

CSS Variables

--spacer

Controls the default bottom margin. Inherited from kempo-css (default 1rem). Override by applying a margin utility class directly to the element.