Top Bar & Main Nav Combo (Stacked/Two-Tiered Navbar) Template

Often referred to as a "stacked" or "two-tiered" header, this is a highly practical navbar layout is ideal for corporate websites and e-commerce stores.

This is a very robust and common pattern for larger e-commerce and corporate sites where there is a lot of important information to present without cluttering the main navigation. This implementation uses position: sticky on the parent header to ensure the entire block sticks to the top as a single unit.

Screenshot of the top nav and main nav combo template

Get Source Code → Preview →

The Top Bar + Main Nav Combo

A highly practical, two-tiered header layout ideal for corporate websites and e-commerce stores. It features a slim "top bar" for secondary, utility information (like social links or contact details) and a larger main navigation bar below for primary site links. The entire header unit remains sticky at the top of the page for constant access.

Two-Tiered Organization — This stacked layout cleanly separates utility links from primary navigation, preventing clutter and creating a clear information hierarchy for the user.
Sticky Header Unit — The entire header, including both the top bar and the main navigation, is wrapped in a single <header> element with position: sticky, ensuring all navigation elements remain available as the user scrolls.
Clean & Professional Aesthetic: The design uses color and font weight to visually distinguish between the top bar and main navigation, resulting in a clean, trustworthy, and easy-to-scan layout.
Responsive and Accessible: The layout intelligently adapts for mobile. The top bar can hide less critical text to save space, and the main navigation collapses into a standard, accessible hamburger menu.
Best Practices: Uses lightweight SVG icons for social media links and clear ARIA attributes for full accessibility compliance.

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

View Output