Open demo

CSS code

HTML 
<header class="hg">
  <a class="logo" href="#">nebula.fm</a>
  <nav class="panel" id="hg-panel" aria-label="Main">
    <ul class="links"><li><a href="#" aria-current="page">Discover</a></li><li><a href="#">Charts</a></li><li><a href="#">Creators</a></li><li><a href="#">Pricing</a></li></ul>
  </nav>
  <a class="cta" href="#">Listen free</a>
  <button class="toggle" type="button" aria-expanded="false" aria-controls="hg-panel" aria-label="Menu"><i></i><i></i><i></i></button>
</header>
CSS 
/* Floating glass pill: sticky with an inset offset, frosted with backdrop-filter.
   Below 992px the links fold into the pill behind a menu button. */
.hg{--hg-focus:#fff;
  position:sticky;top:14px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;
  max-width:960px;margin:14px auto 0;padding:10px 12px 10px 22px;border-radius:16px;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 14px 34px rgba(0,0,0,.25);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.hg,.hg *{box-sizing:border-box}
.hg ul{list-style:none;margin:0;padding:0}
.hg a{text-decoration:none}
.hg a:focus-visible,.hg button:focus-visible{outline:2px solid var(--hg-focus);outline-offset:2px}
.hg .logo{font-weight:800;font-size:1rem;letter-spacing:-.01em;color:#fff;border-radius:6px}
.hg .links{display:flex;gap:2px}
.hg .links a{display:block;padding:9px 13px;font-size:.86rem;font-weight:600;color:rgba(255,255,255,.9);border-radius:10px;transition:background .15s,color .15s}
.hg .links a:hover,.hg .links a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.14)}
.hg .cta{font-size:.84rem;font-weight:700;color:#3b0764;background:#fff;padding:9px 16px;border-radius:11px;white-space:nowrap;transition:transform .15s}
.hg .cta:hover{transform:translateY(-1px)}
.hg .toggle{display:none;width:40px;height:40px;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:11px;cursor:pointer}
.hg .toggle i{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .2s,opacity .2s}
.hg .toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hg .toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.hg .toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:991.98px){
  .hg{margin:14px 16px 0;padding:8px 8px 8px 18px}
  .hg .toggle{display:flex}
  .hg .cta{margin-left:auto}
  .hg .panel{display:none;order:9;flex-basis:100%;padding:8px 10px 6px 0}
  .hg .panel[data-open]{display:block}
  .hg .links{flex-direction:column}
  .hg .links a{padding:11px 13px}
}
@media (prefers-reduced-motion:reduce){.hg *{transition:none!important}}
JavaScript 
/* The menu button (below 992px) toggles aria-expanded and data-open on the nav; Esc closes it and returns focus. */
(() => {
  const toggle = document.querySelector('.hg .toggle'); if (!toggle) return;
  const panel = document.getElementById(toggle.getAttribute('aria-controls'));
  const isOpen = () => toggle.getAttribute('aria-expanded') === 'true';
  const set = open => { toggle.setAttribute('aria-expanded', open); panel.toggleAttribute('data-open', open); };
  toggle.addEventListener('click', () => set(!isOpen()));
  document.addEventListener('keydown', e => { if (e.key === 'Escape' && isOpen()) { set(false); toggle.focus(); } });
})();

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<header class="hg">
  <nav class="navbar navbar-expand-lg" aria-label="Main">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">nebula.fm</a>
      <div class="d-flex align-items-center gap-2 ms-auto order-lg-last">
        <a class="btn cta" href="#">Listen free</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#hg-panel" aria-controls="hg-panel" aria-expanded="false" aria-label="Menu"><i></i><i></i><i></i></button>
      </div>
      <div class="collapse navbar-collapse" id="hg-panel">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Discover</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Charts</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Creators</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>
CSS 
/* Bootstrap .navbar shaped as a floating glass pill: sticky with an inset offset, frosted with backdrop-filter. */
.hg{position:sticky;top:14px;z-index:20;max-width:960px;margin:14px auto 0}
.hg .navbar{--bs-navbar-padding-y:10px;--bs-navbar-padding-x:0;--bs-navbar-color:rgba(255,255,255,.9);--bs-navbar-hover-color:#fff;--bs-navbar-active-color:#fff;
  --bs-navbar-brand-color:#fff;--bs-navbar-brand-hover-color:#fff;--bs-navbar-brand-padding-y:0;--bs-navbar-brand-margin-end:0;--bs-navbar-nav-link-padding-x:13px;
  padding-left:22px;padding-right:12px;border-radius:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 14px 34px rgba(0,0,0,.25)}
.hg .container-fluid{padding:0;gap:0 12px}
.hg .navbar-brand{font-weight:800;font-size:1rem;letter-spacing:-.01em;border-radius:6px}
.hg .navbar-nav{--bs-nav-link-padding-y:9px;--bs-nav-link-font-weight:600;--bs-nav-link-font-size:.86rem;gap:2px}
.hg .nav-link{border-radius:10px;transition:background .15s,color .15s}
.hg .nav-link:hover,.hg .nav-link.active{background:rgba(255,255,255,.14)}
.hg .cta{--bs-btn-font-size:.84rem;--bs-btn-font-weight:700;--bs-btn-padding-x:16px;--bs-btn-padding-y:9px;--bs-btn-border-radius:11px;--bs-btn-border-width:0;
  --bs-btn-color:#3b0764;--bs-btn-bg:#fff;--bs-btn-hover-color:#3b0764;--bs-btn-hover-bg:#fff;--bs-btn-active-color:#3b0764;--bs-btn-active-bg:#fff;white-space:nowrap;transition:transform .15s}
.hg .cta:hover{transform:translateY(-1px)}
.hg a:focus-visible,.hg button:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:none}
.hg .navbar-toggler{width:40px;height:40px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:11px}
.hg .navbar-toggler i{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .2s,opacity .2s}
.hg .navbar-toggler[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hg .navbar-toggler[aria-expanded="true"] i:nth-child(2){opacity:0}
.hg .navbar-toggler[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (min-width:992px){.hg .navbar-toggler{display:none}}
@media (max-width:991.98px){
  .hg{margin:14px 16px 0}
  .hg .navbar{--bs-navbar-padding-y:8px;padding-left:18px;padding-right:8px}
  .hg .navbar-nav{padding:8px 10px 6px 0}
  .hg .navbar-nav .nav-link{padding:11px 13px}
}
@media (prefers-reduced-motion:reduce){.hg *{transition:none!important}}
JavaScript 
/* Esc closes the collapsed menu (below 992px) and returns focus to the menu button. */
document.addEventListener('keydown', e => {
  const panel = document.querySelector('.hg .navbar-collapse.show');
  if (e.key !== 'Escape' || !panel) return;
  bootstrap.Collapse.getOrCreateInstance(panel).hide();
  document.querySelector(`[data-bs-target="#${panel.id}"]`).focus();
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<header class="sticky top-3.5 z-20 mx-auto mt-3.5 flex max-w-[960px] flex-wrap items-center justify-between gap-x-3 rounded-2xl border border-white/20 bg-white/10 py-2.5 pr-3 pl-[22px] text-white shadow-[0_14px_34px_rgba(0,0,0,.25)] backdrop-blur-[16px] max-lg:mx-4 max-lg:py-2 max-lg:pr-2 max-lg:pl-[18px]">
  <a class="rounded-md text-base font-extrabold tracking-[-.01em] text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" href="#">nebula.fm</a>
  <nav class="hidden data-open:block lg:block max-lg:order-9 max-lg:basis-full max-lg:pt-2 max-lg:pr-2.5 max-lg:pb-1.5" id="hg-panel" aria-label="Main">
    <ul class="flex gap-0.5 max-lg:flex-col">
      <li><a class="block rounded-[10px] bg-white/14 px-[13px] py-[9px] text-[.86rem] font-semibold text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white max-lg:py-[11px]" href="#" aria-current="page">Discover</a></li>
      <li><a class="block rounded-[10px] px-[13px] py-[9px] text-[.86rem] font-semibold text-white/90 transition-colors duration-150 hover:bg-white/14 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white motion-reduce:transition-none max-lg:py-[11px]" href="#">Charts</a></li>
      <li><a class="block rounded-[10px] px-[13px] py-[9px] text-[.86rem] font-semibold text-white/90 transition-colors duration-150 hover:bg-white/14 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white motion-reduce:transition-none max-lg:py-[11px]" href="#">Creators</a></li>
      <li><a class="block rounded-[10px] px-[13px] py-[9px] text-[.86rem] font-semibold text-white/90 transition-colors duration-150 hover:bg-white/14 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white motion-reduce:transition-none max-lg:py-[11px]" href="#">Pricing</a></li>
    </ul>
  </nav>
  <a class="rounded-[11px] bg-white px-4 py-[9px] text-[.84rem] font-bold whitespace-nowrap text-hg-plum transition-transform duration-150 hover:-translate-y-px focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white motion-reduce:transition-none max-lg:ml-auto" href="#">Listen free</a>
  <button class="toggle group flex size-10 cursor-pointer flex-col items-center justify-center gap-1 rounded-[11px] border border-white/30 bg-white/12 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white lg:hidden" type="button" aria-expanded="false" aria-controls="hg-panel" aria-label="Menu">
    <i class="block h-0.5 w-[18px] rounded-sm bg-white transition-transform duration-200 group-aria-expanded:translate-y-1.5 group-aria-expanded:rotate-45 motion-reduce:transition-none"></i>
    <i class="block h-0.5 w-[18px] rounded-sm bg-white transition-opacity duration-200 group-aria-expanded:opacity-0 motion-reduce:transition-none"></i>
    <i class="block h-0.5 w-[18px] rounded-sm bg-white transition-transform duration-200 group-aria-expanded:-translate-y-1.5 group-aria-expanded:-rotate-45 motion-reduce:transition-none"></i>
  </button>
</header>
CSS 
@theme {
  --breakpoint-lg: 62rem; /* 992px, the same collapse point as Bootstrap's navbar-expand-lg */
  --color-hg-plum: #3b0764;
}
JavaScript 
/* The menu button (below 992px) toggles aria-expanded and data-open on the nav; Esc closes it and returns focus. */
(() => {
  const toggle = document.querySelector('.toggle[aria-controls="hg-panel"]'); if (!toggle) return;
  const panel = document.getElementById(toggle.getAttribute('aria-controls'));
  const isOpen = () => toggle.getAttribute('aria-expanded') === 'true';
  const set = open => { toggle.setAttribute('aria-expanded', open); panel.toggleAttribute('data-open', open); };
  toggle.addEventListener('click', () => set(!isOpen()));
  document.addEventListener('keydown', e => { if (e.key === 'Escape' && isOpen()) { set(false); toggle.focus(); } });
})();

About this set

A header that floats as a rounded glass pill rather than spanning the page. It is inset 14px from the top and from the sides, capped at 960px wide, and sticky, so it hovers over whatever scrolls underneath while backdrop-filter blurs the purple-to-teal gradient behind a 10% white fill and a thin translucent border. Inside sit the nebula.fm wordmark, four links (Discover, Charts, Creators, Pricing) on translucent white pills, and a white Listen free button with plum text that lifts a pixel on hover. Below 992px the pill keeps its shape: the links fold behind a small glass menu button and, when opened, stack inside the pill itself, which grows to hold them. Use it for music, media, creative tools and launch pages with a colourful or photographic background. Without backdrop-filter the pill falls back to the translucent fill. The Bootstrap version gives the same treatment to a .navbar-expand-lg, and the Tailwind version uses backdrop-blur and white opacity utilities.

What’s included

  • Detached, rounded pill that stays 14px from the edges
  • Frosted glass with backdrop-filter blur
  • Sticky with an inset offset
  • Menu opens inside the pill on phones
  • Listen free button stays visible at every width

Accessibility

The links sit in a nav labelled Main with aria-current="page" on Discover. The menu button has aria-expanded and aria-controls, and Esc closes the menu and returns focus to it. Link text is 90% white or solid white on a dark backdrop, focus shows as a white outline, and hover lifts and colour transitions are removed under prefers-reduced-motion.

Customise it

Change the rgba() fill, border and blur(16px) on .hg, plus max-width and top for the size and offset. Bootstrap uses the same declarations on .navbar with --bs-navbar-* colours; in Tailwind edit bg-white/10, border-white/20, backdrop-blur-[16px] and --color-hg-plum.