How to Create A Sticky NavBar Using Tailwind CSS?

Last Updated : 29 Aug, 2024

Sticky Navbar in Tailwind CSS is mostly used in applications where maintaining quick access to navigation links is essential as users scroll through content. It ensures that the navbar remains visible at the top of the screen, enhancing user experience by providing constant access to key sections of the website.

This feature is particularly useful for long, content-heavy pages, making it easier for users to navigate without needing to scroll back to the top.

Prerequisites

Approach

Set up the basic HTML structure with <!DOCTYPE html>, head, and body elements.
Include necessary meta tags and the Tailwind CSS CDN in the head section using <script src="https://cdn.tailwindcss.com"></script>.
Create a <nav> element for the navbar and use fixed, top-0, and w-full classes to make it sticky and span the full width.
Apply background color to the navbar with bg-black and add padding using p-4 for spacing.
Add a container inside the navbar using container mx-auto flex justify-between items-center to manage layout and alignment.
Include the logo or brand name with text classes like text-white text-2xl font-bold to style it appropriately.
Create a <ul> element with list items representing the navigation links, applying classes like space-x-6, hover:text-yellow-300 to manage spacing and hover effects.
Define content sections for the page, using distinct background colors and layout classes to differentiate between sections and test the sticky behavior of the navbar as you scroll.

Example: The below example demonstrates a sticky navbar using TailwindCSS with attractive styling.

HTML

<!DOCTYPE html>  <head>     <title>Sticky Navbar</title>     <script src="https://cdn.tailwindcss.com"></script> </head>  <body class="bg-gray-100">      <nav class="bg-black p-4 fixed w-full z-50 top-0 shadow-lg">         <div class="container mx-auto flex justify-between items-center">             <div class="text-white text-2xl font-bold">                 GeeksforGeeks             </div>             <ul class="flex space-x-6 text-white">                 <li><a href="#home" class="hover:text-yellow-300">Home</a></li>                 <li><a href="#courses" class="hover:text-yellow-300">Courses</a></li>                 <li><a href="#articles" class="hover:text-yellow-300">Articles</a></li>                 <li><a href="#about" class="hover:text-yellow-300">About Us</a></li>                 <li><a href="#contact" class="hover:text-yellow-300">Contact</a></li>             </ul>         </div>     </nav>     <section id="home" class=      "h-screen flex items-center justify-center bg-green-500 text-white text-4xl font-bold">         <div class="text-center">             <h1 class="text-5xl mb-4">Welcome to GeeksforGeeks</h1>             <p class="text-xl">Your one-stop destination for programming and tech-related content!</p>         </div>     </section>     <section id="courses" class="py-20 px-4 bg-yellow-300 text-green-800">         <div class="container mx-auto">             <h2 class="text-4xl font-bold text-center mb-10">Our Courses</h2>             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">                 <div class="bg-white p-6 rounded-lg shadow-lg">                     <h3 class="text-2xl font-bold mb-4">Data Structures</h3>                     <p>Learn the fundamentals of data structures and algorithms to ace your coding                       interviews.</p>                 </div>                 <div class="bg-white p-6 rounded-lg shadow-lg">                     <h3 class="text-2xl font-bold mb-4">Web Development</h3>                     <p>Master front-end and back-end technologies to become a                        full-stack web developer.</p>                 </div>                 <div class="bg-white p-6 rounded-lg shadow-lg">                     <h3 class="text-2xl font-bold mb-4">Machine Learning</h3>                     <p>Dive into the world of AI and machine learning with our                        comprehensive course.</p>                 </div>             </div>         </div>     </section>      <section id="articles" class="py-20 px-4 bg-blue-500 text-white">         <div class="container mx-auto">             <h2 class="text-4xl font-bold text-center mb-10">Articles & Tutorials</h2>             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">                 <div class="bg-white p-6 rounded-lg shadow-lg text-green-800">                     <h3 class="text-2xl font-bold mb-4">Understanding Recursion</h3>                     <p>A deep dive into the concept of recursion with examples and                        practice problems.</p>                 </div>                 <div class="bg-white p-6 rounded-lg shadow-lg text-green-800">                     <h3 class="text-2xl font-bold mb-4">CSS Grid vs Flexbox</h3>                     <p>An in-depth comparison between CSS Grid and Flexbox for modern web layouts.</p>                 </div>                 <div class="bg-white p-6 rounded-lg shadow-lg text-green-800">                     <h3 class="text-2xl font-bold mb-4">Dynamic Programming</h3>                    <p>Learn the techniques of dynamic programming to solve complex                       problems efficiently.</p>                 </div>                 <div class="bg-white p-6 rounded-lg shadow-lg text-green-800">                     <h3 class="text-2xl font-bold mb-4">JavaScript ES6 Features</h3>                     <p>Explore the new features introduced in ECMAScript 6 and how to use them                        effectively.</p>                 </div>                 <div class="bg-white p-6 rounded-lg shadow-lg text-green-800">                     <h3 class="text-2xl font-bold mb-4">Introduction to Git</h3>                     <p>A beginner's guide to Git and GitHub for version control and collaboration.</p>                 </div>                 <div class="bg-white p-6 rounded-lg shadow-lg text-green-800">                     <h3 class="text-2xl font-bold mb-4">Python for Data Science</h3>                     <p>Leverage Python's powerful libraries for data analysis and visualization.</p>                 </div>             </div>         </div>     </section>      <section id="about" class="py-20 px-4 bg-red-500 text-white">         <div class="container mx-auto text-center">             <h2 class="text-4xl font-bold mb-10">About Us</h2>             <p class="text-xl leading-relaxed">GeeksforGeeks is a leading platform for learning and               sharing knowledge in                 the field of computer science. We provide a wide range of resources, including               tutorials, coding                 challenges, and courses, to help you excel in your tech career.</p>         </div>     </section>     <section id="contact" class="py-20 px-4 bg-purple-500 text-white">         <div class="container mx-auto">             <h2 class="text-4xl font-bold text-center mb-10">Contact Us</h2>             <form class="max-w-lg mx-auto">                 <div class="mb-4">                     <label for="name" class="block text-xl mb-2">Name</label>                     <input type="text" id="name"      				class="w-full p-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2                            focus:ring-yellow-300"                         placeholder="Your Name">                 </div>                 <div class="mb-4">                     <label for="email" class="block text-xl mb-2">Email</label>                     <input type="email" id="email"                         class="w-full p-3 rounded-lg border border-gray-300 focus:outline-none                                 focus:ring-2 focus:ring-yellow-300"                         placeholder="Your Email">                 </div>                 <div class="mb-4">                     <label for="message" class="block text-xl mb-2">Message</label>                     <textarea id="message"                         class="w-full p-3 rounded-lg border border-gray-300 focus:outline-none                                 focus:ring-2 focus:ring-yellow-300"                         rows="5" placeholder="Your Message"></textarea>                 </div>                 <button type="submit"                     class="w-full p-3 bg-yellow-300 text-green-800 rounded-lg font-bold                             hover:bg-yellow-400">Send                     Message</button>             </form>         </div>     </section>  </body>  </html>

Output:

Create Navbars UI using React and Tailwind CSS

anjalibo6rb0

Improve

Article Tags :

How to Create A Sticky NavBar Using Tailwind CSS?

Prerequisites

Approach

Output:

Similar Reads