Nav that solidifies on scroll
Nav starts transparent over the hero and gains a white background plus a hairline shadow past a scroll threshold. Swap the spacer block for real page content; keep the threshold under 60px so the transition reads instantly.
Live preview
open in new tab ↗<header class="v-nav" id="vNav">
<div class="v-nav-inner">
<a class="v-nav-mark" href="#" aria-label="Home">
<svg width="22" height="20" viewBox="0 0 115 100"><polygon points="57.5,0 115,100 0,100" fill="currentColor"/></svg>
</a>
<nav class="v-nav-links">
<a href="#">Products</a>
<a href="#">Resources</a>
<a href="#">Enterprise</a>
<a href="#">Pricing</a>
</nav>
<div class="v-nav-actions">
<a class="v-nav-ghost" href="#">Log In</a>
<a class="v-nav-solid" href="#">Sign Up</a>
</div>
</div>
</header>
<div class="v-nav-spacer"></div>Block id: vercel-nav-scroll-shrinkvanilla · swap-content
More nav blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.