EcoNest Navbar Navbar Block - Let's templates
Unlock every premium block and template with All-Access from €20 / 3 months, cancel anytime. Get All-Access
All blocks
Free Navbar

EcoNest Navbar

A navbar block extracted from the EcoNest template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.

0 19
Demo Download
EcoNest Navbar preview
econest.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        window.FontAwesomeConfig = {
          autoReplaceSvg: 'nest'
        };
      </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EcoNest Navbar | Tailwind CSS UI Block</title>
    <meta name="description" content="A navbar block extracted from the EcoNest template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.">
    <meta name="keywords" content="EcoNest, Tailwind CSS template, HTML website template, sustainable ecommerce template, eco-friendly kitchenware, conscious living brand, ethical home goods, responsive online store">
    <meta name="author" content="Let's templates">
    <link rel="canonical" href="">

    <meta property="og:type" content="product">
    <meta property="og:site_name" content="Let's templates">
    <meta property="og:locale" content="en_US">
    <meta property="og:url" content="">
    <meta property="og:title" content="EcoNest | Tailwind CSS Sustainable Ecommerce Template">
    <meta property="og:description" content="A modern Tailwind CSS ecommerce template for sustainable kitchenware, eco-friendly home essentials, ethical products, and conscious living brands.">
    <meta property="og:image" content="">
    <meta property="og:image:alt" content="EcoNest template preview">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="">
    <meta name="twitter:title" content="EcoNest | Tailwind CSS Sustainable Ecommerce Template">
    <meta name="twitter:description" content="A modern Tailwind CSS ecommerce template for sustainable kitchenware, eco-friendly home essentials, ethical products, and conscious living brands.">
    <meta name="twitter:image" content="">
    <meta name="twitter:image:alt" content="EcoNest template preview">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        serif: ['Fraunces', 'serif'],
                        sans: ['Inter', 'sans-serif'],
                    },
                    colors: {
                        sage: '#6d7f6d',
                        cream: '#f5f3ef',
                        earth: '#3d3d3d',
                        leaf: '#a5b095',
                    }
                }
            }
        }
    </script>
    <style>
        .font-title { font-family: 'Fraunces', serif; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    </style>
</head>
<body class="bg-white text-earth font-sans antialiased">
<!-- block:start navbar -->
    <header id="header" class="fixed top-0 w-full z-50 px-6 py-4">
        <nav class="max-w-[1600px] mx-auto flex items-center justify-between bg-white/70 backdrop-blur-md rounded-full px-8 py-3 border border-slate-100 shadow-sm">
            <div class="flex items-center gap-10">
                <div class="hidden lg:flex items-center gap-6 text-sm font-semibold text-earth">
                    <a href="#" class="hover:opacity-60 transition-opacity">Shop</a>
                    <a href="#" class="hover:opacity-60 transition-opacity">Bestsellers</a>
                    <a href="#" class="hover:opacity-60 transition-opacity">Gallery</a>
                    <a href="#" class="hover:opacity-60 transition-opacity">About</a>
                </div>
            </div>

            <a href="#" class="font-title text-2xl font-bold tracking-tight absolute left-1/2 -translate-x-1/2">EcoNest</a>

            <div class="flex items-center gap-6">
                <div class="hidden md:flex items-center bg-cream rounded-full px-4 py-2 gap-2 border border-slate-200/50">
                    <i class="fa-solid fa-magnifying-glass text-slate-400 text-sm"></i>
                    <input type="text" placeholder="Find sustainable goods..." class="bg-transparent outline-none text-sm w-40 placeholder:text-slate-400">
                </div>
                <div class="flex items-center gap-4">
                    <a href="#" class="relative hover:scale-110 transition-transform">
                        <i class="fa-solid fa-bag-shopping text-xl"></i>
                        <span class="absolute -top-1 -right-1 bg-sage text-white text-[10px] w-4 h-4 flex items-center justify-center rounded-full">2</span>
                    </a>
                    <a href="#" class="hover:scale-110 transition-transform">
                        <i class="fa-regular fa-user text-xl"></i>
                    </a>
                    <button class="lg:hidden text-xl"><i class="fa-solid fa-bars"></i></button>
                </div>
            </div>
        </nav>
    </header>
    <!-- block:end navbar -->
</body>
</html>

From this template

EcoNest screenshot Free

E-commerce

EcoNest

Unlimited access to all products

Unlock the entire library of premium templates and blocks. Renews automatically, cancel anytime.

€20 / 3 months or €60 / year
Get Unlimited Access