Web Designer Wall

Snippets Header

Bootstrap 5 Responsive Header Menu with Top Bar

A responsive header with a utility contact bar, main navigation with a dropdown, a collapsing mobile menu and a photo hero beneath it.

Bootstrap 5 Bootstrap 6 No jQuery Apr 2020 2.4K views 

<section class="wdw-stage py-3 py-md-5">
  <div class="container hm-wrap px-3 px-md-4">
    <div class="wdw-card overflow-hidden">
      <div class="hm-top d-flex align-items-center justify-content-between px-3 px-lg-4 py-2 small">
        <div class="d-flex flex-wrap column-gap-4 row-gap-1">
          <span class="d-none d-lg-inline-flex align-items-center gap-2"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>Mon–Sat, 9am–6pm</span>
          <a class="d-inline-flex align-items-center gap-2 link-body-emphasis link-underline-opacity-0" href="mailto:[email protected]"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>[email protected]</a>
          <a class="d-inline-flex align-items-center gap-2 link-body-emphasis link-underline-opacity-0" href="tel:+18001234567"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg>(800) 123-4567</a>
        </div>
        <span class="wdw-muted d-none d-lg-inline">Free consultation for new projects</span>
      </div>
      <nav class="navbar navbar-expand-lg bg-body px-3 px-lg-4 border-top border-bottom" aria-label="Main">
        <a class="navbar-brand fw-bold d-flex align-items-center gap-2 text-body-emphasis" href="#">
          <span class="wdw-icon hm-logo"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5 9-5Z"/><path d="m3 13 9 5 9-5"/></svg></span>Northwind
        </a>
        <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#hmNav" aria-controls="hmNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="hmNav">
          <ul class="navbar-nav ms-lg-auto align-items-lg-center gap-lg-1 py-3 py-lg-0">
            <li class="nav-item"><a class="nav-link active fw-semibold" aria-current="page" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Listings</a></li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Pages</a>
              <ul class="dropdown-menu border-0">
                <li><a class="dropdown-item py-2" href="#">About us</a></li>
                <li><a class="dropdown-item py-2" href="#">Our team</a></li>
                <li><a class="dropdown-item py-2" href="#">Pricing</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item py-2" href="#">FAQ</a></li>
              </ul>
            </li>
            <li class="nav-item"><a class="nav-link" href="#">Tutorials</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            <li class="nav-item ms-lg-3 mt-2 mt-lg-0"><a class="btn btn-primary rounded-pill px-4" href="#">Book a visit</a></li>
          </ul>
        </div>
      </nav>
      <div class="hm-hero d-flex align-items-end">
        <div class="p-4 p-lg-5 text-white hm-copy">
          <span class="badge rounded-pill text-bg-light mb-3">New collection</span>
          <h1 class="display-5 fw-bold mb-2">Spaces that feel like home</h1>
          <p class="lead mb-4 opacity-100">Interior design and styling for modern living.</p>
          <div class="d-flex flex-wrap gap-2"><a class="btn btn-light rounded-pill px-4" href="#">View projects</a><a class="btn btn-outline-light rounded-pill px-4" href="#">Book a visit</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 6.0.0-alpha.1 (ES modules, no jQuery). Load Bootstrap through an import map and run the JavaScript as type="module" — the downloaded file is already set up that way. Alpha releases can still change class names.

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More header snippets