20 CSS Hamburger Menus 08 / 20

Bootstrap 5 Responsive Navbar with Hamburger

Real Bootstrap 5 with a heavily reskinned .navbar-toggler — themed conic-gradient mark, morphing icon, glass collapse panel. Native collapse functionality intact, default look gone.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="chm-08">
  <div class="chm-08__scene">
    <nav class="navbar navbar-expand-lg chm-08__navbar">
      <div class="container">
        <a class="navbar-brand chm-08__brand" href="#"><span class="chm-08__mk"></span>Strapline</a>
        <button class="navbar-toggler collapsed chm-08__toggler" type="button" data-bs-toggle="collapse" data-bs-target="#chm-08-nav" aria-controls="chm-08-nav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="chm-08__tg"><i></i><i></i><i></i></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end chm-08__collapse" id="chm-08-nav">
          <ul class="navbar-nav align-items-lg-center gap-1 chm-08__nav-ul">
            <li class="nav-item"><a class="nav-link active chm-08__nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link chm-08__nav-link" href="#">Features</a></li>
            <li class="nav-item"><a class="nav-link chm-08__nav-link" href="#">Pricing</a></li>
            <li class="nav-item"><a class="nav-link chm-08__nav-link" href="#">Docs</a></li>
            <li class="nav-item ms-lg-2 mt-2 mt-lg-0"><a class="chm-08__btn-glow" href="#">Sign up</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <section class="chm-08__hero">
      <div class="container">
        <span class="chm-08__chip">Bootstrap 5 · Customized</span>
        <h1>Framework speed,<br><span>zero default look.</span></h1>
        <p>A native <code>.navbar-toggler</code> reskinned with a morphing icon, themed colors, and a glass collapse panel — functionality intact, defaults gone.</p>
      </div>
    </section>
    <div class="chm-08__tag">BOOTSTRAP_5 // 2030</div>
  </div>
</div>
.chm-08, .chm-08 *, .chm-08 *::before, .chm-08 *::after {
  box-sizing: border-box;
}
.chm-08{
  --bsx-ink:#0e1020;--bsx-amber:#ffb454;--bsx-rose:#ff5c8a;--bsx-cyan:#36d7e3;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Sora',sans-serif;background:var(--bsx-ink);color:#f4f5fb;
  position:relative;
}
.chm-08__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden;
  background-image:radial-gradient(60% 50% at 80% 0%,rgba(255,92,138,.16),transparent 55%),radial-gradient(50% 50% at 10% 100%,rgba(54,215,227,.14),transparent 55%)}
.chm-08 .chm-08__navbar{background:rgba(14,16,32,.7)!important;backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08);position:absolute;top:0;left:0;right:0;z-index:60}
.chm-08 .chm-08__brand{font-weight:800;letter-spacing:-.02em;font-size:1.25rem;display:flex;align-items:center;gap:.5rem;color:#f4f5fb}
.chm-08 .chm-08__mk{width:28px;height:28px;border-radius:9px;background:conic-gradient(from 120deg,var(--bsx-amber),var(--bsx-rose),var(--bsx-cyan),var(--bsx-amber))}
.chm-08 .chm-08__nav-link{color:rgba(244,245,251,.8)!important;font-weight:500;border-radius:99px;padding:.45rem 1rem!important;transition:.3s}
.chm-08 .chm-08__nav-link:hover,.chm-08 .chm-08__nav-link.active{color:var(--bsx-ink)!important;background:var(--bsx-amber)}
.chm-08 .chm-08__btn-glow{background:var(--bsx-rose);color:#fff;font-weight:600;border-radius:99px;padding:.45rem 1.2rem;border:none;transition:.3s;text-decoration:none;display:inline-block}
.chm-08 .chm-08__btn-glow:hover{background:var(--bsx-cyan);color:var(--bsx-ink);transform:translateY(-2px)}
.chm-08 .chm-08__toggler{border:1px solid rgba(255,255,255,.18)!important;border-radius:14px;padding:.5rem .6rem;box-shadow:none!important;background:transparent}
.chm-08 .chm-08__tg{width:22px;height:14px;position:relative;display:block}
.chm-08 .chm-08__tg i{position:absolute;left:0;height:2.2px;width:100%;background:var(--bsx-amber);border-radius:3px;transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .3s}
.chm-08 .chm-08__tg i:nth-child(1){top:0}.chm-08 .chm-08__tg i:nth-child(2){top:6px}.chm-08 .chm-08__tg i:nth-child(3){top:12px}
.chm-08 .chm-08__toggler:not(.collapsed) .chm-08__tg i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.chm-08 .chm-08__toggler:not(.collapsed) .chm-08__tg i:nth-child(2){opacity:0}
.chm-08 .chm-08__toggler:not(.collapsed) .chm-08__tg i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.chm-08__hero{padding:7rem 0 3rem;position:relative;z-index:1}
.chm-08__hero h1{font-weight:800;font-size:clamp(2rem,6vw,3.6rem);line-height:.98;letter-spacing:-.02em}
.chm-08__hero h1 span{background:linear-gradient(100deg,var(--bsx-amber),var(--bsx-rose));-webkit-background-clip:text;background-clip:text;color:transparent}
.chm-08__hero p{color:rgba(244,245,251,.6);max-width:520px;font-size:.95rem;margin-top:1rem}
.chm-08__chip{font-family:'Roboto Mono',monospace;font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--bsx-cyan);border:1px solid rgba(54,215,227,.4);border-radius:99px;padding:.35rem .9rem;display:inline-block;margin-bottom:1rem}
.chm-08__tag{position:absolute;bottom:1.2rem;right:1.4rem;font-family:'Roboto Mono',monospace;font-size:.65rem;letter-spacing:.3em;color:rgba(244,245,251,.4);z-index:5}
@media(max-width:991px){.chm-08 .chm-08__collapse{background:rgba(14,16,32,.96);border-radius:18px;padding:1rem;margin-top:.6rem;border:1px solid rgba(255,255,255,.08)}}

@media (prefers-reduced-motion: reduce){
  .chm-08 .chm-08__tg i,.chm-08 .chm-08__nav-link,.chm-08 .chm-08__btn-glow{transition:none !important}
}

More from 20 CSS Hamburger Menus

Mobile Bottom Nav Bar with Floating HamburgerMulti-Level Dropdown Hamburger Menu (Nested Accordion)Flexbox Navbar with Right-Aligned Hamburger IconCircular Expand / Radial Ripple Mobile MenuFixed Sticky Header with Shrinking Hamburger IconNeumorphic Hamburger Menu Toggle ButtonBrutalist CSS Bordered Hamburger Menu3D Rotating Canvas Mobile Hamburger MenuPure CSS Hamburger Menu (No JavaScript)CSS Slide Down Dropdown Hamburger MenuMinimalist 3-Line CSS Menu Icon with Hover EffectsHamburger Menu with Morphing Icon Animations
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →