Centered Logo Navbar

<!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>