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 v3.4. It is responsive. It supports dark mode.

Header

Author farid

Tailwind v3.4 2.1k 3

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

sticky headings
sticky headings

Anonymous

2 years ago

6.6k
Header + simple Hero Section

ABDO-SY

1 year ago

2.9k
Coffee
custom

Rebecca IRANKUNDA

1 year ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
Creative Hero Section

Ijila Itunu

1 year ago

2.1k
Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

zobaidul kaziex

2 years ago

4.3k
Navbar with sub menus

Rajesh Maheshwari

1 year ago

3.7k
Navbar
E-commerce Navbar

Aman kumar

2 years ago

5.6k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

4 months ago

283
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

ishimwe prince

1 year ago

1.4k
canvas fully covers
canvas fully covers

Balogun David Olajuwon

1 year ago

1.3k
section header

Raul antonio de la cruz hernandez

10 months ago

823