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

831

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

App Hero Section With header

Author:
Abdul Baset Bappy

1 month ago

350
Movies are a popular form
Movies are a popular form of entertainment that combine storytelling, visuals, and sound to create immersive experiences. They can be fictional or based on real events, spanning genres like action, comedy, drama, horror, sci-fi, romance, and more. Here’s a quick overview:

Author:
nii fanny

2 months ago

250
Artisan Coffee Crafted with Care
Coffee is one of the world's most beloved beverages, enjoyed by millions daily. Here's an in-depth look at everything coffee-related.

Author:
matoleo chance

2 months ago

182
yvette
vibes kbx

Author:
Umutoniwase Yvette

2 months ago

128
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

8 months ago

3.2k
Responsive Navbar with search profile options

Author:
Rajesh Maheshwari

5 months ago

1.3k
yvette
is good

Author:
Umutoniwase Yvette

2 months ago

278
Hero

Author:
Hasan AlDoy (McDoy)

6 months ago

1.2k
Basic sidebar

Author:
Rajesh Maheshwari

5 months ago

951
tradition music
by salvator

Author:
Baraka Salvator

2 months ago

451
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

1.5k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

6 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components