Centered Logo Navbar

Elegant Bootstrap 6 navbar with links split around a centered logo, a pill call-to-action button and a Drawer menu on mobile.

Also known as: centered logo navigation bar, split navbar logo in middle, navbar with center logo, restaurant website header

Bootstrap 6 Navbars Responsive #centered #logo #navbar #responsive #restaurant

Centered Logo Navbar live demo

Open in new tab

Bootstrap 6 code (HTML, CSS, JS)

Beautify

An elegant Bootstrap 6 navbar with the logo in the middle and the links split to its left and right, finished with a pill "Reserve a table" button. The cream, forest green and gold palette with a serif wordmark fits restaurants, boutiques, hotels and wedding sites. On smaller screens the logo moves to the left and all links slide into a Bootstrap 6 Drawer.

How it works

.clg-root is pinned to data-bs-theme="light" and contains nav.navbar.lg:navbar-expand.clg-navbar. Inside .clg-inner are the .clg-brand logo (inline SVG emblem, .clg-wordmark and .clg-tagline), the toggler and a <dialog class="drawer drawer-start">. The drawer body holds .clg-split, which contains the left link list .clg-links-start and .clg-end with the right links and the .clg-cta button.

When the navbar is at least 1024px wide, a container query in style.css takes over: .clg-split becomes a three-column grid (1fr, --clg-logo-space, 1fr) and the brand is absolutely positioned in the exact center of .clg-inner, over the empty middle column. Below that width the brand returns to normal flow next to the toggler, and the drawer stacks both lists and the button. A thin gold underline grows under hovered and active links using a ::after pseudo-element.

.clg-split is a separate wrapper on purpose: in Bootstrap 6.0.0-alpha.1 the expanded navbar forces display: flex !important on every element whose class contains "drawer", including .drawer-body, so the grid lives on a child element. script.js only keeps aria-expanded on the toggler in sync with the drawer.

Customization

--clg-green, --clg-gold and --clg-cream on .clg-root: the three brand colors used by the CTA, the underlines and the background.
--clg-serif: font stack for the wordmark and headings (Cormorant Garamond from Google Fonts by default).
--clg-logo-space (default 12.5rem): width of the middle column; increase it for a wider logo.
Move list items between .clg-links-start and the list inside .clg-end to rebalance both sides.
Replace the .clg-cta text and icon with your own call to action, or delete it for links only.
Remove the section.clg-demo block; it is sample content only.

Use cases

Restaurants: links split around a centered logo with a pill Reserve a table button
Boutiques and hotels: a cream, green and gold palette with a serif wordmark suits upscale brands
Wedding sites: a thin gold underline grows under hovered and active links
Mobile screens: the logo moves left and all links slide into a drawer

Accessibility

The navbar has aria-label="Main", the logo link has a clear aria-label and the current page uses aria-current="page". The drawer is a native modal <dialog> with a labelled title and an accessible close button. All links and the button show a gold focus outline, and the underline animation is disabled when the visitor prefers reduced motion. Text colors meet contrast on the cream background.

Bootstrap 6 notes

Compared with Bootstrap 5, navbar-expand-lg becomes lg:navbar-expand, navbar-collapse becomes a drawer dialog and btn-primary becomes btn-solid theme-primary, here recolored through --bs-theme-bg. Expansion is driven by the navbar's own width through container queries. Built on 6.0.0-alpha.1; alpha APIs can still change.

Centered Logo Navbar at a glance

Framework: Bootstrap 6
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Bootstrap 6, Bootstrap Icons, fonts.googleapis.com
Layout: Responsive, works on mobile
Category: Navbars
License: Free for personal and commercial use

Questions about this template

Can I use the Centered Logo Navbar code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 6 and Bootstrap Icons and fonts.googleapis.com from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap">

Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's JavaScript load with type="module". Alpha releases can still change before the stable version.