Home
farid
Shrinkable Header

Shrinkable Header

A shrinkable header with responsive menu using a little bit of plain javascript

This tailwind example is contributed by farid, on 08-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Header

Author farid

792

Fork Fullscreen

<header id="sticky-header" class="fixed top-0 left-0 right-0 bg-white dark:bg-gray-800 h-16 sm:h-20 transition-all duration-300 ease-in-out z-50">
        <div class="container mx-auto px-4 h-full flex items-center justify-between">
            <a href="#" class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-white">Logo</a>
            <nav class="hidden sm:block">
                <ul class="flex space-x-4">
                    <li><a href="#" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400">Home</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400">About</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400">Services</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400">Contact</a></li>
                </ul>
            </nav>
            <button id="mobile-menu-button" class="sm:hidden text-gray-600 dark:text-gray-300">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
                </svg>
            </button>
        </div>
    </header>

<div id="mobile-menu" class="fixed inset-0 bg-gray-800 bg-opacity-85 z-40 hidden">
        <div class="flex items-center justify-center h-full">
            <nav class="text-center">
                <ul class="space-y-4">
                    <li><a href="#" class="text-white text-2xl">Home</a></li>
                    <li><a href="#" class="text-white text-2xl">About</a></li>
                    <li><a href="#" class="text-white text-2xl">Services</a></li>
                    <li><a href="#" class="text-white text-2xl">Contact</a></li>
                </ul>
            </nav>
        </div>
    </div>
  <section class="container px-4 mx-auto" id="content">
             <h2 class="text-2xl font-semibold mb-4 dark:text-white">Section 1</h2>
            <p class="text-gray-700 mb-8 dark:text-gray-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
             <h2 class="text-2xl font-semibold mb-4 dark:text-white">Section 2</h2>
            <p class="text-gray-700 mb-8 dark:text-gray-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
             <h2 class="text-2xl font-semibold mb-4 dark:text-white">Section 3</h2>
            <p class="text-gray-700 mb-8 dark:text-gray-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
             <h2 class="text-2xl font-semibold mb-4 dark:text-white">Section 4</h2>
            <p class="text-gray-700 mb-8 dark:text-gray-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
             <h2 class="text-2xl font-semibold mb-4 dark:text-white">Section 5</h2>
            <p class="text-gray-700 mb-8 dark:text-gray-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
             <h2 class="text-2xl font-semibold mb-4 dark:text-white">Section 6</h2>
            <p class="text-gray-700 mb-8 dark:text-gray-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </section>
</main>

// Handle scroll event
    window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }
    });

// Mobile menu toggle
    mobileMenuButton.addEventListener('click', function() {
        mobileMenu.classList.toggle('active');
    });

// Close mobile menu when clicking outside
    mobileMenu.addEventListener('click', function(e) {
        if (e.target === mobileMenu) {
            mobileMenu.classList.remove('active');
        }
    });
});

</script>

Related Examples

Header + simple Hero Section

Author:
ABDO-SY

4 months ago

1.1k
Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

122
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.3k
No one
nice

Author:
Umutoniwase Yvette

4 weeks ago

70
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 weeks ago

187
Sidebar with only icons

Author:
Rajesh Maheshwari

3 months ago

882
Responsive Header

Author:
Rajesh Maheshwari

3 months ago

671
Sticky Changelog

Author:
Michael Andreuzza

1 year ago

1.8k
Animated Title
App Logo or Main Title

Author:
khalidrootdevs

1 year ago

6.6k
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 weeks ago

135
Home
html , css

Author:
Hacker Development

1 month ago

44
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 weeks ago

347

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components