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

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