Back to Header & Navbar
Header

Navbar with CTA Button

Brand, links, and a primary call-to-action.

#navbar#cta

Live preview

Source code

html
<nav class="navbar navbar-expand-lg bg-body sticky-top border-bottom">
  <div class="container">
    <a class="navbar-brand fw-bold" href="#"><i class="bi bi-grid-fill text-primary me-2"></i>Acme</a>
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav2"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="nav2">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item"><a class="nav-link" href="#">Product</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Docs</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
      </ul>
      <a href="#" class="btn btn-primary rounded-pill px-4">Get Started <i class="bi bi-arrow-right ms-1"></i></a>
    </div>
  </div>
</nav>

More designs in this section