Hero Adaptive Navbar - Free UI Component

Scrolled Background #ffffff

Initial Text Color #ffffff

Scrolled Text Color #1a1a1a

Accent Color #007aff

Vertical Padding (rem) 1.1

Fixed Position

Container Width 100%

Hero Adaptive Navbar

A dynamic navbar that starts as a transparent overlay (perfect for high-impact hero sections) and seamlessly transitions into a solid bar with contrasting typography as you scroll.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hero Adaptive Navbar</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        /* -- Variables ------------------------------------------------- */
        :root {
            --init-text: {{initialText}};        /* Top State Text */
            --scroll-text: {{scrolledText}};     /* Scrolled State Text */
            --scroll-bg: {{scrolledBg}};         /* Scrolled State Surface */
            --accent: {{accentColor}};           /* Brand Accent */
            --v-pad: {{vPadding}}rem;            /* Spacing Height */
            --nav-w: {{navWidth}};               /* Layout Constraint */
        }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
            font-family: 'Instrument Sans', sans-serif;
            background-color: #f8fafc;
            color: #1a1a1a;
            min-height: 250vh;
            overflow-x: hidden;
        }

/* -- Hero Adaptive Implementation -------------------------------- */
        .header-main {
            width: 100%;
            z-index: 1000;
            display: flex;
            justify-content: center;
            transition: 0.4s ease;
            position: fixed;
            top: 0;
            left: 0;
            padding: 1rem 0;
        }

/* The "Scrolled" State Triggered by JS */
        .header-main.is-scrolled {
            background: var(--scroll-bg);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            padding: 0.2rem 0;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }

body[data-fixed="No"] .header-main {
            position: absolute;
        }

nav.adaptive-nav {
            width: 100%;
            max-width: var(--nav-w);
            padding: var(--v-pad) 2.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: 0.3s;
        }

/* Brand Transition */
        .brand {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--init-text);
            text-decoration: none;
            letter-spacing: -1.5px;
            transition: 0.3s;
        }
        .header-main.is-scrolled .brand { color: var(--scroll-text); }

/* Links Transition */
        .links {
            display: flex;
            list-style: none;
            gap: 2.5rem;
        }
        .links a {
            color: var(--init-text);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            transition: 0.3s;
            opacity: 0.8;
        }
        .links a:hover { opacity: 1; }
        .header-main.is-scrolled .links a { color: var(--scroll-text); opacity: 0.6; }
        .header-main.is-scrolled .links a:hover { opacity: 1; }

/* CTA Transition */
        .btn-adaptive {
            background: rgba(255,255,255,0.15);
            color: var(--init-text);
            padding: 12px 28px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 0.9rem;
            transition: 0.3s;
            border: 1px solid rgba(255,255,255,0.2);
            backdrop-filter: blur(10px);
        }
        .btn-adaptive:hover { background: white; color: black; border-color: white; }

.header-main.is-scrolled .btn-adaptive {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

/* Hamburger */
        .burger {
            display: none;
            cursor: pointer;
        }
        .burger span {
            display: block;
            width: 25px;
            height: 2px;
            background: var(--init-text);
            margin: 6px 0;
            transition: 0.3s;
        }
        .header-main.is-scrolled .burger span { background: var(--scroll-text); }

@keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
            40% {transform: translateY(-10px);}
            60% {transform: translateY(-5px);}
        }

/* -- Hero Section ------------------------------------------------ */
        .hero {
            height: 100vh;
            width: 100%;
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1470225620780-dba8ba36b745?auto=format&fit=crop&q=80&w=2670&ixlib=rb-4.0.3');
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
            padding: 0 2rem;
        }
        .hero h1 { font-size: 6rem; font-weight: 800; letter-spacing: -4px; max-width: 900px; line-height: 0.9; margin-bottom: 2rem; }
        .hero p { font-size: 1.5rem; opacity: 0.8; max-width: 600px; line-height: 1.4; }

/* Content Section */
        .section-light {
            padding: 10rem 2rem;
            background: #ffffff;
            text-align: center;
        }
        .section-light h2 { font-size: 3rem; margin-bottom: 2rem; color: #000; }

/* Mobile Overlay */
        .mobile-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: white;
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            transform: translateY(-100%);
            transition: 0.6s cubic-bezier(0.85, 0, 0.15, 1);
        }
        .mobile-overlay.active { transform: translateY(0); }
        .mobile-overlay a { font-size: 2.5rem; font-weight: 800; color: black; text-decoration: none; margin: 1rem 0; }

@media (max-width: 968px) {
            .links, .btn-adaptive { display: none; }
            .burger { display: block; }
            .hero h1 { font-size: 3.5rem; letter-spacing: -2px; }
        }
    </style>
</head>
<body data-fixed="{{isFixed}}">

<div class="mobile-overlay" id="mobileOverlay">
        <div class="close-menu" id="closeOverlay" style="position: absolute; top: 2rem; right: 2rem; cursor: pointer; color: black;">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M18 6L6 18M6 6l12 12"></path>
            </svg>
        </div>
        <a href="#">IMMERSE</a>
        <a href="#">ADAPT</a>
        <a href="#">EVOLVE</a>
        <a href="#">START</a>
    </div>

<header class="header-main" id="header">
        <nav class="adaptive-nav">
            <a href="#" class="brand">ADAPTIVE</a>

<ul class="links">
                <li><a href="#">Projects</a></li>
                <li><a href="#">Vision</a></li>
                <li><a href="#">Engineering</a></li>
                <li><a href="#">Labs</a></li>
            </ul>

<div style="display: flex; align-items: center; gap: 2rem;">
                <a href="#" class="btn-adaptive">Unlock Vision</a>
                <div class="burger" id="ham" style="cursor: pointer;">
                    <span></span>
                    <span></span>
                </div>
            </div>
        </nav>
    </header>

<main>
        <div class="hero">
            <h1>IMMERSE IN MOTION.</h1>
            <p>A navigation that respects your content. Transparent at the peaks, solid in the journey.</p>
            <div style="margin-top: 3rem; animation: bounce 2s infinite;">
                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 13l5 5 5-5M7 6l5 5 5-5"/></svg>
            </div>
        </div>

<section class="section-light">
            <h2>TRANSITION COMPLETE</h2>
            <p style="font-size: 1.25rem; max-width: 700px; margin: 0 auto; color: #444; line-height: 1.8;">
                As you scroll away from the hero, the navbar seamlessly adopts its utility state. Text colors flip to maintain readability, backgrounds become solid and blurred to separate navigation from content, and brand elements take center stage.
            </p>
        </section>

// Scroll listener for Adaptive Navbar
        window.addEventListener('scroll', () => {
            if (window.scrollY > 80) {
                header.classList.add('is-scrolled');
            } else {
                header.classList.remove('is-scrolled');
            }
        });

// Mobile toggle
        if(ham) {
            ham.addEventListener('click', () => {
                overlay.classList.add('active');
                document.body.style.overflow = 'hidden';
            });
        }
        if(closeOverlay) {
            closeOverlay.addEventListener('click', () => {
                overlay.classList.remove('active');
                document.body.style.overflow = 'auto';
            });
        }

// Close on ESC
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && overlay.classList.contains('active')) {
                overlay.classList.remove('active');
                document.body.style.overflow = 'auto';
            }
        });

</script>

</body>
</html>