Web Designer Wall

Snippets Header

Bootstrap 5 Header with Logo Left and Social Links

A two-tier site header with a logo and tagline on the left, a dropdown menu, a call-to-action and social icons. It collapses to a toggle menu on small screens.

Bootstrap 5 No jQuery Oct 2019 2.2K views 

<section class="lh-page">
  <header class="bg-body shadow-sm sticky-top">
    <div class="lh-top">
    <div class="container d-flex justify-content-end align-items-center gap-2 py-2 small">
      <span class="wdw-muted me-auto d-none d-md-inline">Designing calmer software since 2014</span>
      <a class="lh-soc" href="#" aria-label="Twitter"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.2 2h3.3l-7.2 8.3L22.8 22h-6.6l-5.2-6.8L5 22H1.7l7.7-8.8L1.2 2H8l4.7 6.2zm-1.2 18h1.8L7 3.9H5.1z"/></svg></a>
      <a class="lh-soc" href="#" aria-label="LinkedIn"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.75 9.75h3.8v1.6h.06c.53-1 1.82-1.95 3.75-1.95 4 0 4.74 2.5 4.74 5.8V21h-4v-5.1c0-1.2 0-2.8-1.75-2.8s-2 1.3-2 2.7V21h-4z"/></svg></a>
      <a class="lh-soc" href="#" aria-label="Website"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z"/></svg></a>
    </div>
    </div>
  <nav class="navbar navbar-expand-lg bg-body py-3" aria-label="Main">
    <div class="container">
      <a class="navbar-brand d-flex align-items-center gap-2 fw-bold" href="#">
        <span class="lh-logo"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 2 9 5v10l-9 5-9-5V7z"/><path d="m12 22V12M3 7l9 5 9-5"/></svg></span>
        <span class="d-flex flex-column lh-1"><span class="fs-5">Cubic</span><small class="fw-normal text-body-secondary lh-sub">Studio & Labs</small></span>
      </a>
      <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#lhNav" aria-controls="lhNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse" id="lhNav">
        <ul class="navbar-nav ms-lg-4 me-auto gap-lg-1">
          <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">About</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Our story</a></li>
              <li><a class="dropdown-item" href="#">Team</a></li>
              <li><a class="dropdown-item" href="#">Careers</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Work</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 mt-3 mt-lg-0">Get in touch</a>
      </div>
    </div>
  </nav>
  </header>
  <main class="container py-4 py-md-5">
    <div class="wdw-aurora lh-hero rounded-4 p-4 p-md-5">
      <span class="wdw-eyebrow mb-3 lh-eyebrow">Cubic Studio & Labs</span>
      <h1 class="display-5 fw-bold mb-3">Calmer software,<br>built with care.</h1>
      <p class="lead mb-4 lh-lead">We design and ship products people enjoy using every day.</p>
      <a href="#" class="btn btn-light rounded-pill px-4">See our work</a>
    </div>
  </main>
</section>

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

Free to use in personal and commercial projects under the MIT license.

Related snippets

More header snippets