Skip to content
heyrav design system
PatternsShipped

Navigation bar

68px, opaque paper, closed by a hairline. Pinned for the first 5% of the page, tucks on scroll down, returns on scroll up.

Used onEvery page
Show code
<nav class="nav"><a class="logo" href="#"><img class="d-invert" src="../assets/brand/lockup.svg" alt="Ravindra Pratap" width="86" height="28"></a><div class="links"><a href="#">Work</a><a href="#">About</a><a href="#">Resume</a></div></nav>
  • Logo + Work / About / Resume only. Resume opens resume.pdf in a new tab.
  • Opaque, not a wash - content scrolls under it rather than showing through.
  • Links at 65% opacity, full on hover; the logo is identity and always full.
  • .is-tucked slides it up 100% (border included); :focus-within brings it back so keyboard focus is never stranded.
  • Under reduced motion it still tucks - in one frame.