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

782

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

Promotional sticky top section

Author:
Leon Bachmann

2 years ago

11.5k
Job Platfoam
If you need a Job You will Have to Apply for it

Author:
soft mind

1 week ago

32
vanessa
nice

Author:
Umutoniwase Yvette

1 week ago

51
Admin portal landing page

Author:
Srreyashi DeyChakii

1 year ago

3.1k
Brutalist Hero

Author:
threehymns

6 months ago

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

Author:
zobaidul kaziex

10 months ago

2.7k
yvette
vibes kbx

Author:
Umutoniwase Yvette

1 week ago

8
Home page
Home page для ПО, страница для входа в приложение.

Author:
Алла Телегина

3 months ago

512
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

4 days ago

33
home
html , css

Author:
Hacker Development

3 weeks ago

261
SocialConnect - Stay Connected
SocialConnect - Stay Connected

Author:
Uwera Dorcas

6 days ago

84
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Author:
Ele Eriksen

1 week ago

16

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components