Shrinking Header free

Starts tall and roomy, then shrinks into a slim blurred bar once the visitor scrolls.

Scroll inside the preview to try it.

Customize

Logo text on the left

Menu links (comma separated)

Button text

Header colour once shrunk

Text and link colour

Hover underline and button colour

Header height at the top of the page (px)

Header height after scrolling (px)

How far to scroll before it shrinks (px)

Shrink animation duration (ms)

Background blur when shrunk (px)

Show the call-to-action button

sticky stays inside its parent, fixed covers the whole page

import ShrinkHeader from './ShrinkHeader';

<ShrinkHeader />

Checking your access…

Dependencies: none