Skip to content
This bar, the navigation below and every hero on the page come from one 7 KB file. Read the module
PolyFish CSS
Module Get the files

Headers module

Everything above the fold.

An announcement bar, a sticky navigation with a working mobile menu, four hero variants, an interior page header and breadcrumbs. No script in any of it — resize this window and open the menu to check.

See the variants Read the docs
  • 7 KB
  • Needs Core
  • Zero scripts
nav.htmlhtml
<header class="pf-nav">
  <div class="pf-container pf-nav__inner">
    <a class="pf-nav__brand" href="/">…</a>

    <!-- the entire mobile menu -->
    <input type="checkbox" id="pf-nav-toggle"
           class="pf-nav__checkbox">
    <label class="pf-nav__burger"
           for="pf-nav-toggle"><span></span></label>

    <div class="pf-nav__menu">…</div>
  </div>
</header>

Announcement bars

Two tones, one line of markup

Default: muted text on the deep surface. With a link
Accent: for the announcement that actually matters. Read it

Heroes

Centred, split and compact

The scale mesh behind each hero is a masked background on the section itself — no image request, no wrapper element.

.pf-hero--center

One column, centred

For launch pages and anything where there is no product screenshot to show.

Primary Secondary

.pf-pagehead, for interior pages

Breadcrumbs, a title and one line of context. Shorter than a hero because the visitor already arrived.

Navigation variants

Three behaviours

.pf-nav

Sticky and blurred, with a solid fallback where color-mix() isn't supported. The default, and what this page uses.

.pf-nav--static

Scrolls away with the page. The right choice for application shells where vertical space is scarce.

.pf-nav--flush

Transparent with no bottom border, for sitting directly on top of a photo hero.

The mobile menu is a checkbox

The input sits before .pf-nav__menu in the markup and a sibling selector opens it. The label is keyboard focusable, the state is real, and there is no script to initialise or forget.