Split Header pro

An editorial header: big centred brand with the menu below, folding into one slim row on scroll.

Scroll inside the preview to try it.

Customize

Big brand name

Menu links (comma separated)

Header colour

Text colour

Thin line under the header

Header height at the top (px)

Header height after scrolling (px)

Brand font size at the top (px)

Brand font size after scrolling (px)

Scroll distance before it folds (px)

Animation duration (ms)

sticky stays inside its parent, fixed covers the whole page

import SplitHeader from './SplitHeader';

<SplitHeader />

Checking your access…

Dependencies: none