Classic Sticky Navbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Classic Sticky Navbar</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Classic Theme)
        ========================================
        */
        :root {
            --color-background: #ffffff;
            --color-text-primary: #343a40;
            --color-text-secondary: #6c757d;
            --color-primary-cta: #0d6efd;
            --color-primary-cta-hover: #0b5ed7;
            --color-border-subtle: #e9ecef;
            
            --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --font-weight-normal: 400;
            --font-weight-bold: 600;

--navbar-height: 70px;
            --navbar-padding: 1rem;
            --container-width: 1140px;
            --border-radius: 0.25rem;
            --transition-speed: 0.2s;
        }

/*
        ========================================
        Global Resets & Base Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }

body {
            margin: 0;
            font-family: var(--font-family-sans-serif);
            font-size: 1rem;
            font-weight: var(--font-weight-normal);
            line-height: 1.5;
            color: var(--color-text-primary);
        }
        
        /* Make the page scrollable to demonstrate the sticky effect */
        .content {
            height: 200vh;
            padding: var(--navbar-padding);
            padding-top: calc(var(--navbar-height) + 2rem);
            max-width: var(--container-width);
            margin: 0 auto;
        }

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 { color: var(--color-text-primary); }
        
        /*
        ========================================
        Main Navbar Structure
        ========================================
        */
        .navbar {
            /* The Core Sticky Logic */
            position: sticky;
            top: 0;
            
            height: var(--navbar-height);
            display: flex;
            align-items: center;
            background-color: var(--color-background);
            z-index: 1000;

/* The subtle drop shadow to "lift" it off the page */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

.navbar__container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: var(--container-width);
            margin: 0 auto;
            padding: 0 var(--navbar-padding);
        }
        
        .navbar__brand {
            font-size: 1.5rem;
            font-weight: var(--font-weight-bold);
            color: var(--color-text-primary);
        }
        
        /*
        ========================================
        Mobile Menu & Toggle
        ========================================
        */
        .navbar__toggle {
            display: block;
            border: 1px solid var(--color-border-subtle);
            border-radius: var(--border-radius);
            padding: 0.25rem 0.75rem;
            background: transparent;
            cursor: pointer;
            z-index: 1001;
        }

.navbar__toggle .bar {
            display: block;
            width: 22px;
            height: 2px;
            margin: 6px 0;
            background-color: var(--color-text-primary);
            transition: all var(--transition-speed) ease;
        }
        
        .navbar__toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
        .navbar__toggle.is-active .bar:nth-child(2) { opacity: 0; }
        .navbar__toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
        
        .navbar__menu {
            display: none;
            flex-direction: column;
            position: absolute;
            top: var(--navbar-height);
            left: 0;
            width: 100%;
            background-color: var(--color-background);
            border-bottom: 1px solid var(--color-border-subtle);
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            z-index: 999;
        }
        
        .navbar__menu.is-active { display: flex; }
        .navbar__item {
            text-align: center;
            border-top: 1px solid var(--color-border-subtle);
        }
        .navbar__link { display: block; padding: 1.25rem; font-weight: var(--font-weight-bold); }

:is(.navbar__toggle, .navbar__link):focus-visible {
            outline: 2px solid var(--color-primary-cta);
            outline-offset: 2px;
            border-radius: var(--border-radius);
        }

/*
        ========================================
        Desktop Navbar Styles
        ========================================
        */
        @media (min-width: 992px) {
            .navbar__toggle { display: none; }
            .navbar__menu {
                display: flex;
                flex-direction: row;
                align-items: center;
                position: static;
                width: auto;
                background: none;
                border: none;
                box-shadow: none;
            }

.navbar__list { display: flex; align-items: center; gap: 1.5rem; }
            .navbar__item { border: none; }
            .navbar__link { font-weight: var(--font-weight-normal); padding: 0.5rem 0; }

.navbar__link--cta {
                background-color: var(--color-primary-cta);
                color: #fff;
                padding: 0.5rem 1rem;
                border-radius: var(--border-radius);
                transition: background-color var(--transition-speed) ease;
            }
            .navbar__link--cta:hover {
                color: #fff;
                background-color: var(--color-primary-cta-hover);
            }
        }
    </style>
</head>
<body>
    <header class="navbar">
        <div class="navbar__container">
            <a href="#" class="navbar__brand">WebCorp</a>
            
            <button class="navbar__toggle" 
                    id="navbarToggle" 
                    aria-label="Toggle navigation" 
                    aria-controls="navbarMenu" 
                    aria-expanded="false">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </button>
            
            <nav id="navbarMenu" class="navbar__menu" role="navigation">
                <ul class="navbar__list">
                    <li class="navbar__item"><a href="#" class="navbar__link">Home</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">About</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Services</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link navbar__link--cta">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<main class="content">
        <h1>Classic Sticky Navbar</h1>
        <p>This navbar will stick to the top of the screen as you scroll down the page.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
        <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.</p>
    </main>
    
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const navbarToggle = document.getElementById('navbarToggle');
            const navbarMenu = document.getElementById('navbarMenu');

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