20 Tailwind CSS Responsive Navbars
12 / 20

All 20 in 20 Tailwind CSS Responsive Navbars

  1. 01Tailwind Glassmorphism Frosted Navbar
  2. 02Tailwind Mega Menu Dropdown Navbar
  3. 03Tailwind Sidebar Drawer Navigation
  4. 04Tailwind Animated Underline Tabs Navbar
  5. 05Tailwind Pill Highlight Navigation Bar
  6. 06Tailwind Scroll-Aware Shrink Navbar
  7. 07Tailwind Neon Dark Navbar
  8. 08Tailwind Breadcrumb Reading Progress Navbar
  9. 09Tailwind Split Two-Tone Navbar
  10. 10Tailwind Bottom Tab Bar Navigation
  11. 11Tailwind Gradient Border Animated Navbar
  12. 12Tailwind Centered Logo Navbar
  13. 13Tailwind Icon Dot Indicator Navbar
  14. 14Tailwind Full-Screen Overlay Menu
  15. 15Tailwind Morphing Search Expand Navbar
  16. 16Tailwind Floating Island Multi-Segment Navbar
  17. 17Tailwind Step Progress Wizard Navbar
  18. 18Tailwind Vertical Rail Sidebar Navbar
  19. 19Tailwind Announcement Bar Dual Navbar
  20. 20Tailwind Scroll Spy Active Highlight Navbar
Pure TailwindMIT licensed

Tailwind Centered Logo Navbar

The fashion-house header: a serif logotype dead centre, uppercase link groups balanced either side. grid-cols-[1fr_auto_1fr] is the entire layout, and the mobile state is the same grid collapsed to two cells — not the second bar the CSS original had to maintain.

Live Demo
Plain CSSTailwind v4
Try it

Complete Tailwind CSS landing page templates in HTML, React, Next.js and Vue · from $49

Cruip · Affiliate link

Browse Cruip templates

The code

<div class="tnb-12 group w-full min-h-svh bg-tnb12-page font-tnb12-sans text-tnb12-ink" aria-label="Centered logo navbar demo">
  <input type="checkbox" id="tnb12-menu" class="sr-only peer" aria-label="Toggle navigation menu">
  <header class="sticky top-0 z-100 border-b border-tnb12-edge bg-tnb12-page">
    <div class="flex h-15 items-center px-5 md:grid md:h-18 md:grid-cols-[1fr_auto_1fr] md:px-10">
      <nav class="hidden justify-self-end md:block" aria-label="Collections">
        <ul class="flex list-none items-center gap-0">
          <li><a href="#collections" aria-current="page" class="block rounded px-4 py-2 text-xs font-medium tracking-[0.12em] whitespace-nowrap text-tnb12-ink uppercase no-underline">Collections</a></li>
          <li><a href="#lookbook" class="block rounded px-4 py-2 text-xs font-medium tracking-[0.12em] whitespace-nowrap text-tnb12-mut uppercase no-underline transition-colors duration-200 hover:text-tnb12-ink">Lookbook</a></li>
          <li><a href="#stores" class="block rounded px-4 py-2 text-xs font-medium tracking-[0.12em] whitespace-nowrap text-tnb12-mut uppercase no-underline transition-colors duration-200 hover:text-tnb12-ink">Stores</a></li>
        </ul>
      </nav>
      <a href="#home" class="block text-center no-underline md:px-6">
        <span class="block font-tnb12-display text-xl font-semibold tracking-[0.08em] whitespace-nowrap text-tnb12-ink md:text-2xl">AURORE</span>
        <span class="hidden text-[10px] font-medium tracking-[0.2em] text-tnb12-acc uppercase md:block">Paris &mdash; since 1924</span>
      </a>
      <nav class="hidden justify-self-start md:block" aria-label="Secondary">
        <ul class="flex list-none items-center justify-start gap-0">
          <li><a href="#about" class="block rounded px-4 py-2 text-xs font-medium tracking-[0.12em] whitespace-nowrap text-tnb12-mut uppercase no-underline transition-colors duration-200 hover:text-tnb12-ink">About</a></li>
          <li><a href="#atelier" class="block rounded px-4 py-2 text-xs font-medium tracking-[0.12em] whitespace-nowrap text-tnb12-mut uppercase no-underline transition-colors duration-200 hover:text-tnb12-ink">Atelier</a></li>
          <li><a href="#reserve" class="ml-2 block rounded border border-tnb12-acc px-3.5 py-1.5 text-xs font-medium tracking-[0.12em] whitespace-nowrap text-tnb12-acc uppercase no-underline transition-colors duration-200 hover:bg-tnb12-acc hover:text-tnb12-page">Reserve</a></li>
        </ul>
      </nav>
      <label for="tnb12-menu" class="ml-auto flex size-11 cursor-pointer flex-col items-center justify-center gap-1.5 md:hidden" aria-hidden="true">
        <span class="block h-px w-5 rounded-sm bg-tnb12-ink transition-transform duration-300 group-has-checked:translate-y-1.5 group-has-checked:rotate-45 motion-reduce:transition-none"></span>
        <span class="block h-px w-5 rounded-sm bg-tnb12-ink transition-opacity duration-300 group-has-checked:opacity-0 motion-reduce:transition-none"></span>
        <span class="block h-px w-5 rounded-sm bg-tnb12-ink transition-transform duration-300 group-has-checked:-translate-y-1.5 group-has-checked:-rotate-45 motion-reduce:transition-none"></span>
      </label>
    </div>
    <nav class="hidden divide-y divide-tnb12-edge border-t border-tnb12-edge px-5 pb-3 max-md:group-has-checked:grid" aria-label="Mobile">
      <a href="#collections" class="flex min-h-11 items-center text-xs font-medium tracking-[0.12em] text-tnb12-ink uppercase no-underline">Collections</a>
      <a href="#lookbook" class="flex min-h-11 items-center text-xs font-medium tracking-[0.12em] text-tnb12-mut uppercase no-underline transition-colors hover:text-tnb12-ink">Lookbook</a>
      <a href="#stores" class="flex min-h-11 items-center text-xs font-medium tracking-[0.12em] text-tnb12-mut uppercase no-underline transition-colors hover:text-tnb12-ink">Stores</a>
      <a href="#about" class="flex min-h-11 items-center text-xs font-medium tracking-[0.12em] text-tnb12-mut uppercase no-underline transition-colors hover:text-tnb12-ink">About</a>
      <a href="#atelier" class="flex min-h-11 items-center text-xs font-medium tracking-[0.12em] text-tnb12-mut uppercase no-underline transition-colors hover:text-tnb12-ink">Atelier</a>
      <a href="#reserve" class="flex min-h-11 items-center text-xs font-medium tracking-[0.12em] text-tnb12-acc uppercase no-underline">Reserve</a>
    </nav>
  </header>
  <main class="mx-auto max-w-2xl px-6 py-16 text-center">
    <h1 class="mb-4 font-tnb12-display text-4xl font-semibold tracking-[0.05em] text-tnb12-ink md:text-5xl">Centered Logo Navbar</h1>
    <p class="text-lg leading-loose text-tnb12-mut">Three grid tracks — <code class="rounded bg-tnb12-acc/12 px-1.5 py-0.5 text-[0.9em]">1fr auto 1fr</code> — hold the wordmark in the middle while the link groups fill the sides. Below <code class="rounded bg-tnb12-acc/12 px-1.5 py-0.5 text-[0.9em]">md</code> the same header keeps the wordmark and folds the links into a hairline list.</p>
  </main>
</div>
@import "tailwindcss";

@theme {
  --color-tnb12-page: #faf8f5;
  --color-tnb12-page: oklch(0.98 0.006 85);
  --color-tnb12-ink: #1a1612;
  --color-tnb12-ink: oklch(0.22 0.01 60);
  --color-tnb12-mut: #857a6b;
  --color-tnb12-mut: oklch(0.58 0.02 75);
  --color-tnb12-edge: #e8e0d4;
  --color-tnb12-edge: oklch(0.91 0.015 85);
  --color-tnb12-acc: #a5853f;
  --color-tnb12-acc: oklch(0.63 0.09 85);
  --font-tnb12-sans: 'Jost', system-ui, sans-serif;
  --font-tnb12-display: 'Cormorant Garamond', Georgia, serif;
}

.tnb-12 {
  width: 100%;
  min-height: 100svh;
}

.tnb-12 ::selection {
  background: var(--color-tnb12-acc);
  color: #faf8f5;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tnb12-page: #faf8f5;
  --color-tnb12-page: oklch(0.98 0.006 85);
  --color-tnb12-ink: #1a1612;
  --color-tnb12-ink: oklch(0.22 0.01 60);
  --color-tnb12-mut: #857a6b;
  --color-tnb12-mut: oklch(0.58 0.02 75);
  --color-tnb12-edge: #e8e0d4;
  --color-tnb12-edge: oklch(0.91 0.015 85);
  --color-tnb12-acc: #a5853f;
  --color-tnb12-acc: oklch(0.63 0.09 85);
  --font-tnb12-sans: 'Jost', system-ui, sans-serif;
  --font-tnb12-display: 'Cormorant Garamond', Georgia, serif;
}

.tnb-12 {
  width: 100%;
  min-height: 100svh;
}

.tnb-12 ::selection {
  background: var(--color-tnb12-acc);
  color: #faf8f5;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Jost:wght@400;500&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • The CSS original's .nav-12__mobile-bar plus .nav-12__mobile-menu — a duplicated logotype and a duplicated link set — are replaced by the same header changing grid mode at md.
  • justify-self-end / justify-self-start replace the original's two justify-content rules, and put the alignment on the thing being aligned.
  • The gold CTA token was darkened to oklch(0.63 0.09 85) so uppercase 12px text clears 4.5:1 on the cream ground; the original's lighter gold did not.
  • divide-y divide-tnb12-edge replaces a a:not(:last-child) { border-bottom } rule and the :last-child exception that came with it.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Centered Logo Navbar
Source: https://codefronts.com/navigation/tailwind-css-responsive-navbars/tailwind-centered-logo-navbar/

The fashion-house header: a serif logotype dead centre, uppercase link groups balanced either side. grid-cols-[1fr_auto_1fr] is the entire layout, and the mobile state is the same grid collapsed to two cells — not the second bar the CSS original had to maintain.
## HTML
```html
<div class="tnb-12 group w-full min-h-svh bg-tnb12-page font-tnb12-sans text-tnb12-ink" aria-label="Centered logo navbar demo">
  <input type="checkbox" id="tnb12-menu" class="sr-only peer" aria-label="Toggle navigation menu">
  <header class="sticky top-0 z-100 border-b border-tnb12-edge bg-tnb12-page">
    <div class="flex h-15 items-center px-5 md:grid md:h-18 md:grid-cols-[1fr_auto_1fr] md:px-10">
      <nav class="hidden justify-self-end md:block" aria-label="Collections">
        <ul class="flex list-none items-center gap-0">
          <li><a href="#collections" aria-current="page" class="block rounded px-4 py-2 text-xs font-medium tracking-[0.12em] whitespace-nowrap text-tnb12-ink uppercase no-underline">Collections</a></li>
          <li><a href="#lookbook" class="block rounded px-4 py-2 text-xs font-medium tracking-[0.12em] whitespace-nowrap text-tnb12-mut uppercase no-underline transition-colors duration-200 hover:text-tnb12-ink">Lookbook</a></li>
          <li><a href="#stores" class="block rounded px-4 py-2 text-xs font-medium tracking-[0.12em] whitespace-nowrap text-tnb12-mut uppercase no-underline transition-colors duration-200 hover:text-tnb12-ink">Stores</a></li>
        </ul>
      </nav>
      <a href="#home" class="block text-center no-underline md:px-6">
        <span class="block font-tnb12-display text-xl font-semibold tracking-[0.08em] whitespace-nowrap text-tnb12-ink md:text-2xl">AURORE</span>
        <span class="hidden text-[10px] font-medium tracking-[0.2em] text-tnb12-acc uppercase md:block">Paris &mdash; since 1924</span>
      </a>
      <nav class="hidden justify-self-start md:block" aria-label="Secondary">
        <ul class="flex list-none items-center justify-start gap-0">
          <li><a href="#about" class="block rounded px-4 py-2 text-xs font-medium tracking-[0.12em] whitespace-nowrap text-tnb12-mut uppercase no-underline transition-colors duration-200 hover:text-tnb12-ink">About</a></li>
          <li><a href="#atelier" class="block rounded px-4 py-2 text-xs font-medium tracking-[0.12em] whitespace-nowrap text-tnb12-mut uppercase no-underline transition-colors duration-200 hover:text-tnb12-ink">Atelier</a></li>
          <li><a href="#reserve" class="ml-2 block rounded border border-tnb12-acc px-3.5 py-1.5 text-xs font-medium tracking-[0.12em] whitespace-nowrap text-tnb12-acc uppercase no-underline transition-colors duration-200 hover:bg-tnb12-acc hover:text-tnb12-page">Reserve</a></li>
        </ul>
      </nav>
      <label for="tnb12-menu" class="ml-auto flex size-11 cursor-pointer flex-col items-center justify-center gap-1.5 md:hidden" aria-hidden="true">
        <span class="block h-px w-5 rounded-sm bg-tnb12-ink transition-transform duration-300 group-has-checked:translate-y-1.5 group-has-checked:rotate-45 motion-reduce:transition-none"></span>
        <span class="block h-px w-5 rounded-sm bg-tnb12-ink transition-opacity duration-300 group-has-checked:opacity-0 motion-reduce:transition-none"></span>
        <span class="block h-px w-5 rounded-sm bg-tnb12-ink transition-transform duration-300 group-has-checked:-translate-y-1.5 group-has-checked:-rotate-45 motion-reduce:transition-none"></span>
      </label>
    </div>
    <nav class="hidden divide-y divide-tnb12-edge border-t border-tnb12-edge px-5 pb-3 max-md:group-has-checked:grid" aria-label="Mobile">
      <a href="#collections" class="flex min-h-11 items-center text-xs font-medium tracking-[0.12em] text-tnb12-ink uppercase no-underline">Collections</a>
      <a href="#lookbook" class="flex min-h-11 items-center text-xs font-medium tracking-[0.12em] text-tnb12-mut uppercase no-underline transition-colors hover:text-tnb12-ink">Lookbook</a>
      <a href="#stores" class="flex min-h-11 items-center text-xs font-medium tracking-[0.12em] text-tnb12-mut uppercase no-underline transition-colors hover:text-tnb12-ink">Stores</a>
      <a href="#about" class="flex min-h-11 items-center text-xs font-medium tracking-[0.12em] text-tnb12-mut uppercase no-underline transition-colors hover:text-tnb12-ink">About</a>
      <a href="#atelier" class="flex min-h-11 items-center text-xs font-medium tracking-[0.12em] text-tnb12-mut uppercase no-underline transition-colors hover:text-tnb12-ink">Atelier</a>
      <a href="#reserve" class="flex min-h-11 items-center text-xs font-medium tracking-[0.12em] text-tnb12-acc uppercase no-underline">Reserve</a>
    </nav>
  </header>
  <main class="mx-auto max-w-2xl px-6 py-16 text-center">
    <h1 class="mb-4 font-tnb12-display text-4xl font-semibold tracking-[0.05em] text-tnb12-ink md:text-5xl">Centered Logo Navbar</h1>
    <p class="text-lg leading-loose text-tnb12-mut">Three grid tracks — <code class="rounded bg-tnb12-acc/12 px-1.5 py-0.5 text-[0.9em]">1fr auto 1fr</code> — hold the wordmark in the middle while the link groups fill the sides. Below <code class="rounded bg-tnb12-acc/12 px-1.5 py-0.5 text-[0.9em]">md</code> the same header keeps the wordmark and folds the links into a hairline list.</p>
  </main>
</div>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tnb12-page: #faf8f5;
  --color-tnb12-page: oklch(0.98 0.006 85);
  --color-tnb12-ink: #1a1612;
  --color-tnb12-ink: oklch(0.22 0.01 60);
  --color-tnb12-mut: #857a6b;
  --color-tnb12-mut: oklch(0.58 0.02 75);
  --color-tnb12-edge: #e8e0d4;
  --color-tnb12-edge: oklch(0.91 0.015 85);
  --color-tnb12-acc: #a5853f;
  --color-tnb12-acc: oklch(0.63 0.09 85);
  --font-tnb12-sans: 'Jost', system-ui, sans-serif;
  --font-tnb12-display: 'Cormorant Garamond', Georgia, serif;
}

.tnb-12 {
  width: 100%;
  min-height: 100svh;
}

.tnb-12 ::selection {
  background: var(--color-tnb12-acc);
  color: #faf8f5;
}
```

How this works

Three tracks, one centred cell. The side tracks are 1fr and absorb the links; the logo track is auto and takes only its own width, which is what keeps it optically centred:

class="md:grid md:h-18 md:grid-cols-[1fr_auto_1fr]"

Balance is the one fragile part. Equal 1fr tracks centre the logo only while both sides are similar widths; badly unbalanced groups push it off centre, and the fix is a min-w-* on the centre cell rather than a layout change.

Mobile keeps the wordmark. The grid becomes a two-cell flex row — logotype plus toggle — and the links move into a hairline-divided list, so the brand never turns into a hamburger and a gap.

Make it yours

  • Side balance: keep each group to three items, or add md:min-w-40 to the logo cell.
  • Real logotype: drop an inline SVG into the centre cell; the auto track needs no change.
  • Tighter bar: md:h-18 → md:h-16; the subtitle line is what makes the taller bar worthwhile.
  • Underline hover instead of colour: add hover:underline hover:underline-offset-4 for a more editorial feel.

Gotchas — read before shipping

  • Uppercase links at text-xs need the letter-spacing to stay legible — do not drop tracking-[0.12em] while keeping the size.
  • Unequal link counts visibly decentre the logo; that is a content problem the grid cannot solve for you.
  • The outlined CTA must not change border width on hover, or every hover nudges its neighbours by a pixel.
  • A serif logotype at tracking-[0.08em] renders differently across faces; check the optical centring after a font swap.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

CSS Grid is Baseline; the floor quoted is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

gridtw ↗transitionstw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →