Open demo

CSS code

HTML 
<div class="ha-bar" id="ha-bar">
  <p>Twelve new header designs just landed — <a href="#">see them all</a></p>
  <button type="button" aria-label="Dismiss announcement"><span aria-hidden="true">×</span></button>
</div>
<header class="ha">
  <a class="logo" href="#">Northwind</a>
  <nav class="panel" id="ha-panel" aria-label="Main">
    <ul class="links"><li><a href="#" aria-current="page">Templates</a></li><li><a href="#">Components</a></li><li><a href="#">Pricing</a></li><li><a href="#">Blog</a></li></ul>
  </nav>
  <a class="cta" href="#">Get started</a>
  <button class="toggle" type="button" aria-expanded="false" aria-controls="ha-panel" aria-label="Menu"><i></i><i></i><i></i></button>
</header>
CSS 
/* A dismissible announcement bar over a sticky header. The bar scrolls away; the header stays.
   The close button hides the bar and moves focus to the logo. Below 992px the nav collapses behind a menu button. */
.ha-bar{position:relative;padding:11px 44px;background:#1a1d26;color:#fff;text-align:center;font-size:.85rem;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.ha-bar[hidden]{display:none}
.ha-bar p{margin:0}
.ha-bar a{color:#a5b4fc;font-weight:600;text-decoration:underline;text-underline-offset:2px;border-radius:3px}
.ha-bar button{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:26px;height:26px;display:grid;place-items:center;
  padding:0;border:0;border-radius:7px;background:none;color:#9aa2b5;font:inherit;font-size:1.1rem;cursor:pointer}
.ha-bar button:hover{background:rgba(255,255,255,.1);color:#fff}
.ha-bar a:focus-visible,.ha-bar button:focus-visible{outline:2px solid #a5b4fc;outline-offset:2px}
.ha{--ha-ink:#1a1d26;--ha-muted:#4b5468;--ha-soft:#f2f4f8;
  position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:0 12px;min-height:68px;padding:0 36px;
  background:#fff;border-bottom:1px solid #e8eaf0;color:var(--ha-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.ha,.ha *{box-sizing:border-box}
.ha ul{list-style:none;margin:0;padding:0}
.ha a{text-decoration:none}
.ha a:focus-visible,.ha button:focus-visible{outline:2px solid #4f46e5;outline-offset:2px}
.ha .logo{font-weight:800;font-size:1.08rem;color:var(--ha-ink);border-radius:6px}
.ha .links{display:flex;gap:4px}
.ha .links a{display:block;padding:9px 14px;font-size:.9rem;font-weight:600;color:var(--ha-muted);border-radius:9px}
.ha .links a:hover,.ha .links a[aria-current="page"]{background:var(--ha-soft);color:var(--ha-ink)}
.ha .cta{font-size:.85rem;font-weight:700;padding:10px 18px;border-radius:10px;background:var(--ha-ink);color:#fff;white-space:nowrap}
.ha .toggle{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:#fff;border:1px solid #d7dbe3;border-radius:10px;cursor:pointer}
.ha .toggle i{display:block;width:20px;height:2px;border-radius:2px;background:var(--ha-ink);transition:transform .2s,opacity .2s}
.ha .toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ha .toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.ha .toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:991.98px){
  .ha-bar{padding:11px 44px 11px 16px;font-size:.8rem;text-align:left}
  .ha{flex-wrap:wrap;padding:12px 16px}
  .ha .toggle{display:flex}
  .ha .cta{margin-left:auto}
  .ha .panel{display:none;order:9;flex-basis:100%;padding:10px 0 4px}
  .ha .panel[data-open]{display:block}
  .ha .links{flex-direction:column;gap:2px}
  .ha .links a{padding:11px 14px}
}
@media (prefers-reduced-motion:reduce){.ha *{transition:none!important}}
JavaScript 
/* Dismiss: hide the bar and move focus to the logo. Menu button (below 992px): toggle aria-expanded and
   data-open on the nav; Esc closes it and returns focus. */
(() => {
  const bar = document.getElementById('ha-bar'), hd = document.querySelector('.ha');
  if (bar) bar.querySelector('button').addEventListener('click', () => { bar.hidden = true; hd.querySelector('.logo').focus(); });
  const toggle = hd && hd.querySelector('.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 
<div class="ha-bar alert alert-dismissible fade show" id="ha-bar">
  <p class="m-0">Twelve new header designs just landed — <a href="#">see them all</a></p>
  <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Dismiss announcement"></button>
</div>
<header class="ha sticky-top">
  <nav class="navbar navbar-expand-lg" aria-label="Main">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Northwind</a>
      <div class="d-flex align-items-center gap-2 ms-auto order-lg-last">
        <a class="btn cta" href="#">Get started</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#ha-panel" aria-controls="ha-panel" aria-expanded="false" aria-label="Menu"><i></i><i></i><i></i></button>
      </div>
      <div class="collapse navbar-collapse" id="ha-panel">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Templates</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Components</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>
CSS 
/* A dismissible .alert as the announcement bar (Alert plugin, .btn-close-white), over a .sticky-top .navbar-expand-lg. */
.ha-bar{--bs-alert-bg:#1a1d26;--bs-alert-color:#fff;--bs-alert-border-color:transparent;--bs-alert-border-radius:0;--bs-alert-margin-bottom:0;
  --bs-alert-padding-y:11px;--bs-alert-padding-x:44px;text-align:center;font-size:.85rem}
.ha-bar.alert-dismissible{padding-right:44px}
.ha-bar a{color:#a5b4fc;font-weight:600;text-underline-offset:2px;border-radius:3px}
.ha-bar .btn-close{--bs-btn-close-opacity:.7;--bs-btn-close-hover-opacity:1;--bs-btn-close-focus-shadow:none;top:50%;right:14px;width:26px;height:26px;padding:0;
  transform:translateY(-50%);background-size:10px;border-radius:7px}
.ha-bar .btn-close:hover{background-color:rgba(0,0,0,.1)}
.ha-bar a:focus-visible,.ha-bar .btn-close:focus-visible{outline:2px solid #a5b4fc;outline-offset:2px}
.ha{--ha-ink:#1a1d26;--ha-muted:#4b5468;--ha-soft:#f2f4f8}
.ha .navbar{--bs-navbar-padding-y:0;--bs-navbar-padding-x:36px;--bs-navbar-color:var(--ha-muted);--bs-navbar-hover-color:var(--ha-ink);--bs-navbar-active-color:var(--ha-ink);
  --bs-navbar-brand-color:var(--ha-ink);--bs-navbar-brand-hover-color:var(--ha-ink);--bs-navbar-brand-padding-y:0;--bs-navbar-brand-margin-end:0;--bs-navbar-nav-link-padding-x:14px;
  min-height:68px;background:#fff;border-bottom:1px solid #e8eaf0}
.ha .container-fluid{padding:0;gap:0 12px}
.ha .navbar-brand{font-weight:800;font-size:1.08rem;border-radius:6px}
.ha .navbar-nav{--bs-nav-link-padding-y:9px;--bs-nav-link-font-weight:600;--bs-nav-link-font-size:.9rem;gap:4px}
.ha .nav-link{border-radius:9px}
.ha .nav-link:hover,.ha .nav-link.active{background:var(--ha-soft)}
.ha .cta{--bs-btn-font-size:.85rem;--bs-btn-font-weight:700;--bs-btn-padding-x:18px;--bs-btn-padding-y:10px;--bs-btn-border-radius:10px;--bs-btn-border-width:0;
  --bs-btn-color:#fff;--bs-btn-bg:var(--ha-ink);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#2b2f3b;--bs-btn-active-color:#fff;--bs-btn-active-bg:#2b2f3b;white-space:nowrap}
.ha a:focus-visible,.ha button:focus-visible{outline:2px solid #4f46e5;outline-offset:2px;box-shadow:none}
.ha .navbar-toggler{width:44px;height:44px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid #d7dbe3;border-radius:10px}
.ha .navbar-toggler i{display:block;width:20px;height:2px;border-radius:2px;background:var(--ha-ink);transition:transform .2s,opacity .2s}
.ha .navbar-toggler[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ha .navbar-toggler[aria-expanded="true"] i:nth-child(2){opacity:0}
.ha .navbar-toggler[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:992px){.ha .navbar-toggler{display:none}}
@media (max-width:991.98px){
  .ha-bar{--bs-alert-padding-x:16px;font-size:.8rem;text-align:left}
  .ha .navbar{--bs-navbar-padding-x:16px;padding-top:12px;padding-bottom:12px}
  .ha .navbar-nav{gap:2px;padding:10px 0 4px}
  .ha .navbar-nav .nav-link{padding:11px 14px}
}
@media (prefers-reduced-motion:reduce){.ha *,.ha-bar{transition:none!important}}
JavaScript 
/* After the Alert plugin removes the bar, move focus to the logo. Esc closes the collapsed menu (below 992px). */
(() => {
  const bar = document.getElementById('ha-bar'), hd = document.querySelector('.ha');
  if (bar) bar.addEventListener('closed.bs.alert', () => hd.querySelector('.navbar-brand').focus());
  document.addEventListener('keydown', e => {
    const panel = hd.querySelector('.navbar-collapse.show');
    if (e.key !== 'Escape' || !panel) return;
    bootstrap.Collapse.getOrCreateInstance(panel).hide();
    hd.querySelector('.navbar-toggler').focus();
  });
})();

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="relative bg-ha-ink px-11 py-[11px] text-center text-[.85rem] text-white max-lg:pr-11 max-lg:pl-4 max-lg:text-left max-lg:text-[.8rem]" id="ha-bar">
  <p>Twelve new header designs just landed — <a class="rounded-[3px] font-semibold text-ha-link underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ha-link" href="#">see them all</a></p>
  <button class="absolute top-1/2 right-3.5 grid size-[26px] -translate-y-1/2 cursor-pointer place-items-center rounded-[7px] text-[1.1rem] text-[#9aa2b5] hover:bg-white/10 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ha-link" type="button" aria-label="Dismiss announcement"><span aria-hidden="true">×</span></button>
</div>
<header class="ha sticky top-0 z-10 flex min-h-[68px] items-center justify-between gap-x-3 border-b border-[#e8eaf0] bg-white px-9 text-ha-ink max-lg:flex-wrap max-lg:px-4 max-lg:py-3">
  <a class="logo rounded-md text-[1.08rem] font-extrabold text-ha-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ha-focus" href="#">Northwind</a>
  <nav class="hidden data-open:block lg:block max-lg:order-9 max-lg:basis-full max-lg:pt-2.5 max-lg:pb-1" id="ha-panel" aria-label="Main">
    <ul class="flex gap-1 max-lg:flex-col max-lg:gap-0.5">
      <li><a class="block rounded-[9px] bg-ha-soft px-3.5 py-[9px] text-[.9rem] font-semibold text-ha-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ha-focus max-lg:py-[11px]" href="#" aria-current="page">Templates</a></li>
      <li><a class="block rounded-[9px] px-3.5 py-[9px] text-[.9rem] font-semibold text-ha-muted hover:bg-ha-soft hover:text-ha-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ha-focus max-lg:py-[11px]" href="#">Components</a></li>
      <li><a class="block rounded-[9px] px-3.5 py-[9px] text-[.9rem] font-semibold text-ha-muted hover:bg-ha-soft hover:text-ha-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ha-focus max-lg:py-[11px]" href="#">Pricing</a></li>
      <li><a class="block rounded-[9px] px-3.5 py-[9px] text-[.9rem] font-semibold text-ha-muted hover:bg-ha-soft hover:text-ha-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ha-focus max-lg:py-[11px]" href="#">Blog</a></li>
    </ul>
  </nav>
  <a class="rounded-[10px] bg-ha-ink px-[18px] py-2.5 text-[.85rem] font-bold whitespace-nowrap text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ha-focus max-lg:ml-auto" href="#">Get started</a>
  <button class="toggle group flex size-11 cursor-pointer flex-col items-center justify-center gap-[5px] rounded-[10px] border border-[#d7dbe3] bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ha-focus lg:hidden" type="button" aria-expanded="false" aria-controls="ha-panel" aria-label="Menu">
    <i class="block h-0.5 w-5 rounded-sm bg-ha-ink transition-transform duration-200 group-aria-expanded:translate-y-[7px] group-aria-expanded:rotate-45 motion-reduce:transition-none"></i>
    <i class="block h-0.5 w-5 rounded-sm bg-ha-ink transition-opacity duration-200 group-aria-expanded:opacity-0 motion-reduce:transition-none"></i>
    <i class="block h-0.5 w-5 rounded-sm bg-ha-ink transition-transform duration-200 group-aria-expanded:-translate-y-[7px] 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-ha-ink: #1a1d26;
  --color-ha-muted: #4b5468;
  --color-ha-soft: #f2f4f8;
  --color-ha-link: #a5b4fc;
  --color-ha-focus: #4f46e5;
}
JavaScript 
/* Dismiss: hide the bar and move focus to the logo. Menu button (below 992px): toggle aria-expanded and
   data-open on the nav; Esc closes it and returns focus. */
(() => {
  const bar = document.getElementById('ha-bar'), hd = document.querySelector('.ha');
  if (bar) bar.querySelector('button').addEventListener('click', () => { bar.hidden = true; hd.querySelector('.logo').focus(); });
  const toggle = hd && hd.querySelector('.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(); } });
})();

About this set

A dark announcement bar with one line of news and a link, sitting above a sticky white header with a logo, four links and a Get started button. The bar scrolls away with the page while the header sticks to the top. A close button at the right end of the bar hides it; focus then moves to the header logo, so keyboard and screen reader users are not left on an element that no longer exists. The current page, Templates, is marked with aria-current and a grey pill. Below 992px the bar text aligns left to leave room for the close button, and the links fold behind a menu button while Get started stays in the bar. Use it for launches, sales, event dates or maintenance windows. Add a storage check to the dismiss handler if the bar should stay closed on the next visit. The Bootstrap version uses a dismissible .alert with .btn-close-white and the Alert plugin, listening for closed.bs.alert to move focus, above a .sticky-top .navbar-expand-lg.

What’s included

  • Dismissible bar with a real close button
  • Focus moves to the logo after dismissing
  • Sticky header under a bar that scrolls away
  • Links collapse behind a menu button below 992px
  • Get started button visible at every width

Accessibility

The close button is named Dismiss announcement and its x is hidden from screen readers. The links sit in a nav labelled Main with aria-current="page" on Templates; the menu button has aria-expanded and aria-controls and Esc closes the menu and returns focus to it. Both the bar and the header show visible focus outlines, and transitions stop under prefers-reduced-motion.

Customise it

Change the background and link colour on .ha-bar, and --ha-ink, --ha-muted and --ha-soft on .ha. Bootstrap reads --bs-alert-bg and --bs-alert-color for the bar and --bs-navbar-* for the header; in Tailwind edit the --color-ha-* theme colours.