*Build a SaaS Landing Page — chapter 2 of 6.* Logo, links, CTA — responsive.

What you will build#

The canonical SaaS navbar.

Step by step#

example
html
<header class="sticky top-0 z-40 backdrop-blur bg-white/70 border-b">
  <nav class="container mx-auto px-6 h-16 flex items-center justify-between">
    <a class="font-bold text-lg">Acme</a>
    <div class="hidden md:flex gap-6 text-sm">Features Pricing Docs</div>
    <a class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm">Sign up</a>
  </nav>
</header>

Why it works#

sticky + backdrop-blur = the modern frosted navbar.

Try it yourself#

  • Add a mobile menu button
  • Add dark: variants
  • Add hover: states

Series navigation#

tutorials/index|All tutorials · tutorials/saas-landing/wireframe|← Wireframe in utilities · tutorials/saas-landing/hero|The hero →