Centered Logo Navbar Template

Navbar with the logo in the center, flanked on both sides by the menu items. Fully mobile-responsive and accessible.

This implementation uses a modern CSS Grid layout on desktop to achieve perfect, robust centering of the logo. On mobile, it gracefully reflows into a standard, user-friendly layout with the logo on the left and a hamburger menu on the right.

Get Source Code → Preview →

The Centered Logo Navbar

A classic, balanced, and aesthetically pleasing navbar layout where the brand logo sits perfectly in the center, flanked by navigation links. This symmetrical design is ideal for portfolios, boutiques, creative studios, or any brand wanting to put their logo front and center in a sophisticated way.

Symmetrical Centered Layout — On desktop screens, this navbar uses a robust CSS Grid layout to precisely center the logo, with navigation items split evenly on either side for a clean, balanced look.
Responsive Fallback — The design intelligently adapts to mobile devices. It transforms into the most user-friendly mobile pattern: logo on the left and a hamburger menu icon on the right, which toggles a vertical list of all navigation links.
Clean Visual Hierarchy: The clear separation of links and the prominent logo create an intuitive and easy-to-navigate experience for users.
Modern and Maintainable: Built with minimal code and CSS custom properties for easy customization. The use of CSS Grid ensures the layout is stable and maintainable.

Coding Best Practices

CSS custom properties (variables) are used for easy theme customization (colors, fonts).
The code is appropriately commented to explain the purpose of each section.
A tiny, efficient JavaScript snippet is used for the mobile menu toggle, as it is the most accessible and modern method (arguably superior to the older "checkbox hack").

Code

Here's the full code for the navbar template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Centered Logo Navbar</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Elegant Theme)
        ========================================
        */
        :root {
            --color-background: #ffffff;
            --color-text-primary: #1d1d1f;
            --color-text-secondary: #6e6e73;
            --color-primary-accent: #0071e3;
            --color-border: #d2d2d7;

--font-family-sans-serif: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            --navbar-height: 80px;
            --container-width: 1200px;
            --transition-speed: 0.2s;
        }

/*
        ========================================
        Base & Page Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: var(--font-family-sans-serif); background-color: #f5f5f7; }
        .content { height: 200vh; max-width: var(--container-width); margin: 0 auto; padding: calc(var(--navbar-height) + 2rem) 1.5rem; }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; color: var(--color-text-secondary); transition: color var(--transition-speed) ease; }
        a:hover, a:focus { color: var(--color-text-primary); }
        
        /*
        ========================================
        Main Navbar Structure
        ========================================
        */
        .navbar {
            position: sticky; top: 0; z-index: 1000;
            height: var(--navbar-height); display: flex; align-items: center;
            background-color: var(--color-background); border-bottom: 1px solid var(--color-border);
        }
        
        .navbar__container {
            width: 100%; max-width: var(--container-width); margin: 0 auto;
            padding: 0 1.5rem; display: flex;
            align-items: center; justify-content: space-between;
        }

.navbar__brand-logo {
            font-size: 1.75rem; font-weight: 600; color: var(--color-text-primary);
        }

/*
        ========================================
        Mobile Navigation (Default State)
        ========================================
        */
        .navbar__desktop-nav { display: none; } /* Hide desktop nav on mobile */
        
        .navbar__mobile-toggle {
            display: block; border: none; background: transparent; cursor: pointer;
        }

.mobile-menu {
            display: none; position: absolute; top: var(--navbar-height); left: 0;
            width: 100%; background-color: var(--color-background);
            border-top: 1px solid var(--color-border); box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        }
        .mobile-menu.is-active { display: block; }
        .mobile-menu ul li a { display: block; padding: 1rem 1.5rem; }
        .mobile-menu ul li:not(:last-child) { border-bottom: 1px solid var(--color-border); }

:is(.navbar__mobile-toggle, .navbar__desktop-nav a):focus-visible { outline: 2px solid var(--color-primary-accent); outline-offset: 4px; border-radius: 4px; }
        
        /*
        ========================================
        Desktop Navigation (Centered Layout)
        ========================================
        */
        @media (min-width: 992px) {
            .navbar__mobile-toggle { display: none; }
            .mobile-menu { display: none !important; } /* Ensure it's never shown on desktop */
            
            .navbar__container {
                /* The core layout magic: CSS Grid */
                display: grid;
                grid-template-columns: 1fr auto 1fr; /* Left links | Logo | Right links */
                align-items: center;
                column-gap: 2rem;
            }
            
            .navbar__brand-logo {
                /* This is the center column in the grid */
                justify-self: center;
            }
            
            .navbar__desktop-nav {
                display: flex; /* Now visible on desktop */
                align-items: center;
            }
            .navbar__desktop-nav ul {
                display: flex; gap: 2rem;
            }
            
            /* Align the left group of links to the right */
            .navbar__desktop-nav--left { justify-content: flex-end; }
            /* Align the right group of links to the left */
            .navbar__desktop-nav--right { justify-content: flex-start; }
        }

</style>
</head>
<body>
    <header class="navbar">
        <div class="navbar__container">
            
            <nav class="navbar__desktop-nav navbar__desktop-nav--left">
                <ul>
                    <li><a href="#">Shop</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                </ul>
            </nav>
            
            
            <a href="#" class="navbar__brand-logo">Aura</a>
            
            
            <nav class="navbar__desktop-nav navbar__desktop-nav--right">
                <ul>
                    <li><a href="#">Journal</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>

<button class="navbar__mobile-toggle" id="navbarToggle" aria-label="Open menu" aria-controls="mobileMenu" aria-expanded="false">
                &#x2630;
            </button>
        </div>
    </header>

<div class="mobile-menu" id="mobileMenu">
        <ul>
            
            <li><a href="#">Shop</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Journal</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    
    <main class="content">
        <h1>Centered Logo Navbar</h1>
        <p>On larger screens, the logo is perfectly centered. On smaller screens, the layout gracefully changes to a standard mobile-friendly pattern.</p>
    </main>

if (navbarToggle && mobileMenu) {
            navbarToggle.addEventListener('click', function () {
                const isExpanded = this.getAttribute('aria-expanded') === 'true';
                this.setAttribute('aria-expanded', !isExpanded);
                mobileMenu.classList.toggle('is-active');
            });
        }
    });
    </script>
</body>
</html>

View Output