← All elements
<div class="sc"><header><b>acme.</b><span>Home</span><span>Work</span></header><p>Scroll down inside this box to shrink the header.</p><p>Keep going.</p><p>And a little more.</p><p>The header follows your scroll.</p></div>About this navigation bar
Scroll-Linked Shrinking Header is a pure CSS navigation bar made with HTML and CSS only, by @admin. Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.