Classic Sticky Navbar Template

This navbar uses that classic sticky effect, where it sticks to the top of the screen when the user scrolls. It's a clean, no-frills, professional component that's easy to integrate into almost any project.

Get Source Code → Preview →

The Classic Sticky Navbar

This is the quintessential sticky navbar, a fundamental component for modern websites. It remains fixed to the top of the viewport as the user scrolls, keeping navigation controls accessible at all times without requiring any complex JavaScript.

Core Sticky Functionality — Achieved using a single, powerful CSS property: position: sticky. This is the modern, performant way to create sticky headers without the layout complexities of position: fixed.
Subtle Drop Shadow — A soft drop shadow appears below the navbar, visually "lifting" it off the content below. This adds depth and clearly separates the navigation from the rest of the page.
Clean and Timeless Layout: Features a standard, professional layout with the brand logo on the left, navigation links in the center, and a distinct call-to-action button on the right.
Fully Responsive: The navbar gracefully collapses into an accessible, toggle-able hamburger menu on smaller screens, ensuring a great user experience on all devices.
Simple and Easy to Integrate: With minimal code and clean CSS variables, this component is incredibly easy to customize and drop into any project.

Coding Best Practices

CSS custom properties (variables) are used for easy theme customization (colors, fonts).
The code is heavily 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 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>

View Output