Open demo

CSS code

HTML 
<header class="hcn">
  <p class="bar">Complimentary shipping on orders over $120</p>
  <div class="mast">
    <a class="logo" href="#"><b>Meridian & Co.</b><span>Est. 1968</span></a>
    <button class="toggle" type="button" aria-expanded="false" aria-controls="hcn-panel" aria-label="Menu"><i></i><i></i><i></i></button>
    <div class="panel" id="hcn-panel">
      <nav class="left" aria-label="Shop"><ul class="links"><li><a href="#" aria-current="page">Shop</a></li><li><a href="#">Collections</a></li><li><a href="#">Journal</a></li></ul></nav>
      <nav class="right" aria-label="Customer"><ul class="links"><li><a href="#">About</a></li><li><a href="#">Stores</a></li><li><a href="#">Cart (2)</a></li></ul></nav>
    </div>
  </div>
</header>
CSS 
/* Centered masthead: a serif logotype flanked by two short navs, with a message bar on top.
   The .panel wrapper is display: contents on wide screens, so both navs sit in the header grid;
   below 992px it becomes the drop-down menu behind the button. */
.hcn{--hcn-ink:#231f1a;--hcn-muted:#5c5344;--hcn-accent:#8a5a26;--hcn-line:#e9e2d4;--hcn-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--hcn-ink);background:#fcfaf6}
.hcn,.hcn *{box-sizing:border-box}
.hcn ul{list-style:none;margin:0;padding:0}
.hcn a{text-decoration:none}
.hcn a:focus-visible,.hcn button:focus-visible{outline:2px solid var(--hcn-accent);outline-offset:3px}
.hcn .bar{margin:0;padding:9px 16px;text-align:center;font-family:var(--hcn-sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;background:var(--hcn-ink);color:#e8ddcb}
.hcn .mast{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:26px 40px;border-bottom:1px solid var(--hcn-line)}
.hcn .logo{grid-column:2;grid-row:1;text-align:center;color:var(--hcn-ink);font-family:Georgia,"Times New Roman",serif;border-radius:4px}
.hcn .logo b{display:block;font-size:1.7rem;letter-spacing:.04em}
.hcn .logo span{font-family:var(--hcn-sans);font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;color:var(--hcn-accent)}
.hcn .panel{display:contents}
.hcn .links{display:flex;gap:26px;font-family:var(--hcn-sans)}
.hcn .left{grid-column:1;grid-row:1}
.hcn .left .links{justify-content:flex-end;padding-right:44px}
.hcn .right{grid-column:3;grid-row:1}
.hcn .right .links{padding-left:44px}
.hcn .links a{position:relative;display:block;padding-bottom:4px;font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--hcn-muted)}
.hcn .links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--hcn-accent);transition:right .2s ease}
.hcn .links a:hover::after,.hcn .links a[aria-current="page"]::after{right:0}
.hcn .links a[aria-current="page"]{color:var(--hcn-ink)}
.hcn .toggle{display:none;grid-column:1;grid-row:1;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:none;border:1px solid #d8cfbe;border-radius:10px;cursor:pointer}
.hcn .toggle i{display:block;width:20px;height:2px;border-radius:2px;background:var(--hcn-ink);transition:transform .2s,opacity .2s}
.hcn .toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hcn .toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.hcn .toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:991.98px){
  .hcn .mast{grid-template-columns:44px 1fr 44px;gap:0 12px;padding:14px 16px}
  .hcn .toggle{display:flex}
  .hcn .logo b{font-size:1.4rem}
  .hcn .panel{display:none;grid-column:1/-1;grid-row:2;padding:14px 0 6px}
  .hcn .panel[data-open]{display:block}
  .hcn .links,.hcn .left .links,.hcn .right .links{flex-direction:column;gap:0;padding:0}
  .hcn .links a{padding:13px 4px;border-top:1px solid var(--hcn-line)}
  .hcn .links a::after{bottom:-1px}
}
@media (prefers-reduced-motion:reduce){.hcn *,.hcn *::after{transition:none!important}}
JavaScript 
/* The menu button (below 992px) toggles aria-expanded and data-open on the panel; Esc closes it and returns focus. */
(() => {
  const toggle = document.querySelector('.hcn .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="hcn">
  <p class="bar">Complimentary shipping on orders over $120</p>
  <div class="navbar navbar-expand-lg">
    <div class="container-fluid">
      <a class="navbar-brand" href="#"><b>Meridian & Co.</b><span>Est. 1968</span></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#hcn-panel" aria-controls="hcn-panel" aria-expanded="false" aria-label="Menu"><i></i><i></i><i></i></button>
      <div class="collapse navbar-collapse" id="hcn-panel">
        <nav class="left" aria-label="Shop"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Shop</a></li><li class="nav-item"><a class="nav-link" href="#">Collections</a></li><li class="nav-item"><a class="nav-link" href="#">Journal</a></li></ul></nav>
        <nav class="right" aria-label="Customer"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">About</a></li><li class="nav-item"><a class="nav-link" href="#">Stores</a></li><li class="nav-item"><a class="nav-link" href="#">Cart (2)</a></li></ul></nav>
      </div>
    </div>
  </div>
</header>
CSS 
/* Bootstrap .navbar-expand-lg laid out as a three-column grid. From 992px the .navbar-collapse is
   display: contents, so its two navs land either side of the centred .navbar-brand. */
.hcn{--hcn-ink:#231f1a;--hcn-muted:#5c5344;--hcn-accent:#8a5a26;--hcn-line:#e9e2d4;--hcn-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.hcn .bar{margin:0;padding:9px 16px;text-align:center;font-family:var(--hcn-sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;background:var(--hcn-ink);color:#e8ddcb}
.hcn .navbar{--bs-navbar-padding-y:26px;--bs-navbar-padding-x:40px;--bs-navbar-color:var(--hcn-muted);--bs-navbar-hover-color:var(--hcn-muted);
  --bs-navbar-active-color:var(--hcn-ink);--bs-navbar-brand-color:var(--hcn-ink);--bs-navbar-brand-hover-color:var(--hcn-ink);
  --bs-navbar-brand-padding-y:0;--bs-navbar-brand-margin-end:0;--bs-navbar-nav-link-padding-x:0;border-bottom:1px solid var(--hcn-line)}
.hcn .container-fluid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0}
.hcn .navbar-brand{grid-column:2;grid-row:1;text-align:center;font-family:Georgia,"Times New Roman",serif;line-height:normal;border-radius:4px}
.hcn .navbar-brand b{display:block;font-size:1.7rem;letter-spacing:.04em}
.hcn .navbar-brand span{font-family:var(--hcn-sans);font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;color:var(--hcn-accent)}
.hcn .navbar-nav{--bs-nav-link-padding-y:0;--bs-nav-link-font-weight:600;--bs-nav-link-font-size:.8rem;gap:26px;font-family:var(--hcn-sans)}
.hcn .left{grid-column:1;grid-row:1}
.hcn .left .navbar-nav{justify-content:flex-end;padding-right:44px}
.hcn .right{grid-column:3;grid-row:1}
.hcn .right .navbar-nav{padding-left:44px}
.hcn .nav-link{position:relative;padding-bottom:4px;letter-spacing:.1em;text-transform:uppercase}
.hcn .nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--hcn-accent);transition:right .2s ease}
.hcn .nav-link:hover::after,.hcn .nav-link.active::after{right:0}
.hcn a:focus-visible,.hcn button:focus-visible{outline:2px solid var(--hcn-accent);outline-offset:3px;box-shadow:none}
.hcn .navbar-toggler{grid-column:1;grid-row:1;width:44px;height:44px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid #d8cfbe;border-radius:10px}
.hcn .navbar-toggler i{display:block;width:20px;height:2px;border-radius:2px;background:var(--hcn-ink);transition:transform .2s,opacity .2s}
.hcn .navbar-toggler[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hcn .navbar-toggler[aria-expanded="true"] i:nth-child(2){opacity:0}
.hcn .navbar-toggler[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:992px){
  .hcn .navbar-toggler{display:none}
  .hcn .navbar-collapse{display:contents!important}
}
@media (max-width:991.98px){
  .hcn .navbar{--bs-navbar-padding-y:14px;--bs-navbar-padding-x:16px}
  .hcn .container-fluid{grid-template-columns:44px 1fr 44px;gap:0 12px}
  .hcn .navbar-brand b{font-size:1.4rem}
  .hcn .navbar-collapse{grid-column:1/-1;grid-row:2}
  .hcn .left{padding-top:14px}
  .hcn .right{padding-bottom:6px}
  .hcn .navbar-nav,.hcn .left .navbar-nav,.hcn .right .navbar-nav{gap:0;padding:0}
  .hcn .navbar-nav .nav-link{padding:13px 4px;border-top:1px solid var(--hcn-line)}
  .hcn .nav-link::after{bottom:-1px}
}
@media (prefers-reduced-motion:reduce){.hcn *,.hcn *::after{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('.hcn .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="hcn bg-[#fcfaf6] text-hcn-ink">
  <p class="bg-hcn-ink px-4 py-[9px] text-center font-hcn-sans text-[.72rem] tracking-[.14em] text-[#e8ddcb] uppercase">Complimentary shipping on orders over $120</p>
  <div class="grid grid-cols-[1fr_auto_1fr] items-center border-b border-hcn-line px-10 py-[26px] max-lg:grid-cols-[44px_1fr_44px] max-lg:gap-x-3 max-lg:px-4 max-lg:py-3.5">
    <a class="col-start-2 row-start-1 rounded text-center font-hcn-serif text-hcn-ink focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-hcn-accent" href="#"><b class="block text-[1.7rem] tracking-[.04em] max-lg:text-[1.4rem]">Meridian & Co.</b><span class="font-hcn-sans text-[.64rem] tracking-[.34em] text-hcn-accent uppercase">Est. 1968</span></a>
    <button class="toggle group col-start-1 row-start-1 flex size-11 cursor-pointer flex-col items-center justify-center gap-[5px] rounded-[10px] border border-[#d8cfbe] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-hcn-accent lg:hidden" type="button" aria-expanded="false" aria-controls="hcn-panel" aria-label="Menu">
      <i class="block h-0.5 w-5 rounded-sm bg-hcn-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-hcn-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-hcn-ink transition-transform duration-200 group-aria-expanded:-translate-y-[7px] group-aria-expanded:-rotate-45 motion-reduce:transition-none"></i>
    </button>
    <div class="hidden data-open:block lg:contents max-lg:col-span-full max-lg:row-start-2 max-lg:pt-3.5 max-lg:pb-1.5" id="hcn-panel">
      <nav class="col-start-1 row-start-1" aria-label="Shop">
        <ul class="flex justify-end gap-[26px] pr-11 font-hcn-sans max-lg:flex-col max-lg:gap-0 max-lg:p-0">
          <li><a class="relative block pb-1 text-[.8rem] font-semibold tracking-[.1em] text-hcn-ink uppercase after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-hcn-accent focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-hcn-accent max-lg:border-t max-lg:border-hcn-line max-lg:px-1 max-lg:py-[13px] max-lg:after:-bottom-px" href="#" aria-current="page">Shop</a></li>
          <li><a class="relative block pb-1 text-[.8rem] font-semibold tracking-[.1em] text-hcn-muted uppercase after:absolute after:bottom-0 after:left-0 after:right-full after:h-0.5 after:bg-hcn-accent after:transition-[right] after:duration-200 hover:after:right-0 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-hcn-accent motion-reduce:after:transition-none max-lg:border-t max-lg:border-hcn-line max-lg:px-1 max-lg:py-[13px] max-lg:after:-bottom-px" href="#">Collections</a></li>
          <li><a class="relative block pb-1 text-[.8rem] font-semibold tracking-[.1em] text-hcn-muted uppercase after:absolute after:bottom-0 after:left-0 after:right-full after:h-0.5 after:bg-hcn-accent after:transition-[right] after:duration-200 hover:after:right-0 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-hcn-accent motion-reduce:after:transition-none max-lg:border-t max-lg:border-hcn-line max-lg:px-1 max-lg:py-[13px] max-lg:after:-bottom-px" href="#">Journal</a></li>
        </ul>
      </nav>
      <nav class="col-start-3 row-start-1" aria-label="Customer">
        <ul class="flex gap-[26px] pl-11 font-hcn-sans max-lg:flex-col max-lg:gap-0 max-lg:p-0">
          <li><a class="relative block pb-1 text-[.8rem] font-semibold tracking-[.1em] text-hcn-muted uppercase after:absolute after:bottom-0 after:left-0 after:right-full after:h-0.5 after:bg-hcn-accent after:transition-[right] after:duration-200 hover:after:right-0 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-hcn-accent motion-reduce:after:transition-none max-lg:border-t max-lg:border-hcn-line max-lg:px-1 max-lg:py-[13px] max-lg:after:-bottom-px" href="#">About</a></li>
          <li><a class="relative block pb-1 text-[.8rem] font-semibold tracking-[.1em] text-hcn-muted uppercase after:absolute after:bottom-0 after:left-0 after:right-full after:h-0.5 after:bg-hcn-accent after:transition-[right] after:duration-200 hover:after:right-0 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-hcn-accent motion-reduce:after:transition-none max-lg:border-t max-lg:border-hcn-line max-lg:px-1 max-lg:py-[13px] max-lg:after:-bottom-px" href="#">Stores</a></li>
          <li><a class="relative block pb-1 text-[.8rem] font-semibold tracking-[.1em] text-hcn-muted uppercase after:absolute after:bottom-0 after:left-0 after:right-full after:h-0.5 after:bg-hcn-accent after:transition-[right] after:duration-200 hover:after:right-0 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-hcn-accent motion-reduce:after:transition-none max-lg:border-t max-lg:border-hcn-line max-lg:px-1 max-lg:py-[13px] max-lg:after:-bottom-px" href="#">Cart (2)</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>
CSS 
@theme {
  --breakpoint-lg: 62rem; /* 992px, the same collapse point as Bootstrap's navbar-expand-lg */
  --color-hcn-ink: #231f1a;
  --color-hcn-muted: #5c5344;
  --color-hcn-accent: #8a5a26;
  --color-hcn-line: #e9e2d4;
  --font-hcn-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-hcn-serif: Georgia, "Times New Roman", serif;
}
JavaScript 
/* The menu button (below 992px) toggles aria-expanded and data-open on the panel; Esc closes it and returns focus. */
(() => {
  const toggle = document.querySelector('.hcn .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 department-store masthead: a dark message strip on top, then a serif logotype, Meridian & Co. with a small Est. 1968 line, centred between two short navigation lists. Shop, Collections and Journal sit to its left; About, Stores and Cart sit to its right. Links are small uppercase sans-serif with wide letter spacing, and a bronze underline grows from the left on hover and stays under the current page. The header is a three-column grid; the two navs sit in a wrapper that uses display: contents on wide screens, so they land either side of the logo while the source order stays logo first. Below 992px that wrapper becomes a drop-down panel behind a menu button on the left, the logo stays centred, and the six links stack in one list with hairline dividers. Use it for fashion, homeware, hotel and restaurant brands where the name should be the first thing anyone sees. The Bootstrap version applies the same grid to a .navbar-expand-lg and makes its .navbar-collapse display: contents from 992px.

What’s included

  • Serif logotype centred between two navigation lists
  • Underline grows from the left on hover and marks the current page
  • Message strip above the masthead
  • Both lists fold into one menu below 992px
  • Grid layout with display: contents, so the logo comes first in the source

Accessibility

The two lists are separate navs labelled Shop and Customer, and the current link has aria-current="page". The menu button has aria-expanded and aria-controls, and Esc closes the menu and returns focus to it. The bronze accent was darkened to #8a5a26 so the small Est. 1968 line reaches 4.5:1; focus shows as a bronze outline and the underline animation stops under prefers-reduced-motion.

Customise it

Change --hcn-ink, --hcn-muted, --hcn-accent and --hcn-line on .hcn, and the Georgia stack for another serif. Bootstrap reads the same variables plus --bs-navbar-*; in Tailwind edit the --color-hcn-* and --font-hcn-* theme values.