Navbar: logo, links, button

What you receive in Webflow

• 9 native elements and 6 classes.
• Breakpoints: mobile landscape (767px).
• States: hover.
• No Embed elements. Everything is native.

How to paste it

1. Click Copy for Webflow.
2. Open your page in the Webflow Designer.
3. Press ⌘V or Ctrl+V.

HTML

<nav class="nav1">
  <div class="nav1-inner">
    <a href="#" class="nav1-logo">Acme</a>
    <div class="nav1-links"><a href="#" class="nav1-link">Product</a><a href="#" class="nav1-link">Pricing</a><a href="#" class="nav1-link">Customers</a><a href="#" class="nav1-link">Blog</a></div>
    <a href="#" class="nav1-btn">Get started</a>
  </div>
</nav>
<style>
.nav1 { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background:#ffffff; border-bottom:1px solid #eceef2; }
.nav1-inner { max-width:1200px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav1-logo { font-size:20px; font-weight:700; color:#0f172a; text-decoration:none; }
.nav1-links { display:flex; gap:28px; }
.nav1-link { color:#475569; text-decoration:none; font-size:15px; }
.nav1-link:hover { color:#0f172a; }
.nav1-btn { background:#4353ff; color:#fff; padding:10px 18px; border-radius:8px; text-decoration:none; font-size:15px; font-weight:600; }
.nav1-btn:hover { background:#2f3fe0; }
@media (max-width:767px) { .nav1-links { display:none; } }
</style>