Top Bar And Main Nav Combo Navbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Top Bar + Main Nav Combo (Corrected)</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Corporate Theme)
        ========================================
        */
        :root {
            --color-background: #ffffff;
            --color-text-primary: #1f2d3d;
            --color-text-secondary: #8492a6;
            --color-primary-brand: #3b82f6;
            --color-border: #e2e8f0;
            --color-top-bar-bg: #f8fafc;
            --font-family-sans-serif: "Open Sans", -apple-system, sans-serif;
            --main-nav-height: 80px;
            --container-width: 1200px;
            --navbar-padding: 1rem;
            --transition-speed: 0.2s;
        }

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
        
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: var(--font-family-sans-serif); line-height: 1.6; }
        .content { height: 200vh; max-width: var(--container-width); margin: 0 auto; padding: 2rem; }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; }
        
        /* The sticky header unit */
        .site-header { position: sticky; top: 0; z-index: 1000; background-color: var(--color-background); }
        
        /* Utility class applied directly to header elements */
        .header-container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--navbar-padding); }

/* --- Top Bar (Tier 1) --- */
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            background-color: var(--color-top-bar-bg);
            padding-top: 0.5rem; padding-bottom: 0.5rem;
            font-size: 0.875rem; color: var(--color-text-secondary);
            border-bottom: 1px solid var(--color-border);
        }
        .top-bar a { color: inherit; transition: color var(--transition-speed) ease; }
        .top-bar a:hover { color: var(--color-primary-brand); }
        .contact-info, .social-links { display: flex; align-items: center; gap: 1rem; }
        .social-links .icon { width: 1.25em; height: 1.25em; }

/* --- Main Navigation (Tier 2) --- */
        .main-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: var(--main-nav-height);
        }
        .main-nav__brand { font-size: 1.75rem; font-weight: 600; color: var(--color-text-primary); }

/* Mobile Menu styles */
        .main-nav__toggle { display: block; border: 1px solid var(--color-border); border-radius: 4px; padding: 0.25rem 0.75rem; background: transparent; cursor: pointer; }
        .main-nav__toggle .bar { display: block; width: 22px; height: 2px; margin: 6px 0; background-color: var(--color-text-primary); transition: transform var(--transition-speed) ease; }
        .main-nav__toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
        .main-nav__toggle.is-active .bar:nth-child(2) { opacity: 0; }
        .main-nav__toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
        .main-nav__menu { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--color-background); box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
        .main-nav__menu.is-active { display: block; }
        .main-nav__item:not(:last-child) { border-bottom: 1px solid var(--color-border); }
        .main-nav__link { display: block; padding: 1rem 1.5rem; font-weight: 600; color: var(--color-text-primary); }

@media (max-width: 576px) { .contact-info__text { display: none; } }

@media (min-width: 992px) {
            .main-nav__toggle { display: none; }
            .main-nav__menu { display: flex; align-items: center; position: static; width: auto; background: none; box-shadow: none; }
            .main-nav__list { display: flex; align-items: center; gap: 2rem; }
            .main-nav__item:not(:last-child) { border-bottom: none; }
            .main-nav__link { padding: 0.5rem; }
            .main-nav__link:hover { color: var(--color-primary-brand); }
        }
    </style>
</head>
<body>
    <header class="site-header">
        <div class="top-bar header-container">
            <div class="contact-info">
                <a href="tel:1-800-555-0199">&#x1F4DE; <span class="contact-info__text">1-800-555-0199</span></a>
            </div>
            <div class="social-links">
                <a href="#" aria-label="Our Twitter Profile"><svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"/></svg></a>
                <a href="#" aria-label="Our LinkedIn Profile"><svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M18.5,18.5V13.2A3.26,3.26 0 0,0 15.24,9.94C14.39,9.94 13.5,10.43 13,11.1V10.13H10.13V18.5H13V13.57C13,12.8 13.12,12.04 14.14,12.04C15.16,12.04 15.24,12.95 15.24,13.66V18.5H18.5M6.88,8.56A1.68,1.68 0 0,0 8.56,6.88C8.56,6 8,5.44 7.22,5.44C6.44,5.44 5.88,6 5.88,6.88A1.68,1.68 0 0,0 6.88,8.56M8.13,18.5V10.13H5.63V18.5H8.13Z"/></svg></a>
            </div>
        </div>
        
        
        <div class="main-nav header-container">
            <a href="#" class="main-nav__brand">BizCorp</a>
            <button class="main-nav__toggle" id="navbarToggle"><span class="bar"></span><span class="bar"></span><span class="bar"></span></button>
            <nav id="navbarMenu" class="main-nav__menu">
                <ul class="main-nav__list">
                    <li class="main-nav__item"><a href="#" class="main-nav__link">Home</a></li>
                    <li class="main-nav__item"><a href="#" class="main-nav__link">Services</a></li>
                    <li class="main-nav__item"><a href="#" class="main-nav__link">About Us</a></li>
                    <li class="main-nav__item"><a href="#" class="main-nav__link">Blog</a></li>
                    <li class="main-nav__item"><a href="#" class="main-nav__link">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<main class="content"><h1>Top Bar + Main Nav Combo</h1></main>
    
    <script>
        // Toggle the mobile menu
        document.addEventListener('DOMContentLoaded', function() {
            const navbarToggle = document.getElementById('navbarToggle');
            const navbarMenu = document.getElementById('navbarMenu');
            if (navbarToggle && navbarMenu) {
                navbarToggle.addEventListener('click', () => {
                    navbarToggle.classList.toggle('is-active');
                    navbarMenu.classList.toggle('is-active');
                    navbarToggle.setAttribute('aria-expanded', navbarMenu.classList.contains('is-active'));
                });
            }
        });
    </script>
</body>
</html>