Bobby Iliev

Posted on Aug 7, 2023 • Originally published at devdojo.com

How to Create a Sticky NavBar using Tailwind CSS

#tailwindcss #css #webdev #beginners

Introduction

When building a modern, responsive website, navigation plays a crucial role in user experience. A sticky or affix navigation bar remains visible at the top of the screen as users scroll, making it easy for them to access the main menu items without having to scroll back to the top. Tailwind CSS, a popular utility-first CSS framework, makes it simple to create elegant, functional sticky navigation bars. In this tutorial, we'll walk you through the process of creating a sticky navigation bar using Tailwind CSS and showcase some stylish designs to inspire your project.

Step 1: Setting Up the Project

Before we start, make sure you have Tailwind CSS installed in your project. You can either use the CLI, include it from a CDN, or set up a custom build. Visit the official Tailwind CSS documentation to learn how to set up Tailwind CSS for your specific project.

Step 2: Creating the Basic NavBar

First, let's create a simple navigation bar using Tailwind CSS. Add the following HTML code to your project:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
    <title>Sticky NavBar using Tailwind CSS</title>
</head>
<body class="bg-gray-100">
    <header class="bg-white">
        <nav class="container mx-auto px-6 py-3">
            <div class="flex justify-between items-center">
                <a href="#" class="text-2xl font-bold text-gray-800">MyWebsite</a>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-800">Home</a>
                    <a href="#" class="text-gray-800">About</a>
                    <a href="#" class="text-gray-800">Services</a>
                    <a href="#" class="text-gray-800">Contact</a>
                </div>
            </div>
        </nav>
    </header>
    <!-- Add your page content here -->
</body>
</html>

This code sets up a basic navigation bar with a container, logo, and menu links.

Step 3: Making the NavBar Sticky

To make the navigation bar sticky, we need to add the fixed, top-0, and w-full classes to the <header> element. This will fix the header at the top of the viewport and span the full width of the screen. Update your <header> tag as follows:

<header class="bg-white fixed top-0 w-full">

Now, when you scroll down the page, the navigation bar will remain at the top.

Step 4: Adding a Shadow

To create a subtle separation between the sticky navigation bar and the page content, add a shadow using the shadow-md class:

<header class="bg-white fixed top-0 w-full shadow-md">

Step 5: Design Inspirations

Now that you've created a basic sticky navigation bar using Tailwind CSS, you can customize its design by applying various utility classes or creating your own. Here are a few design ideas to inspire you:

Transparent background with a color change on scroll: Add a transparent background to the navigation bar and change the background color when the user scrolls down, creating a smooth transition effect. You can achieve this by using JavaScript to toggle a class when the user scrolls.
Hover effect on menu items: Enhance user experience by adding a hover effect to the menu items. Use the hover: prefix to change the text color or background color of the menu items when users hover over them. For example:

<a href="#" class="text-gray-800 hover:text-blue-600">Home</a>

Add a call-to-action button: Encourage users to take a specific action, such as signing up or contacting you, by adding a CTA button to the navigation bar. Use the bg-, text-, and rounded- classes to style the button:

<a href="#" class="bg-blue-600 text-white px-4 py-2 rounded-md">Sign Up</a>

Responsive design with a hamburger menu: For mobile devices, you can create a responsive design by hiding the menu items and displaying a hamburger menu instead. Use Tailwind CSS's responsive classes (e.g., lg:hidden and lg:flex) and JavaScript to toggle the mobile menu.
Add a search bar: Enhance your sticky navigation bar by integrating a search bar. Use the border-, rounded-, and focus: classes to style the input field and search button:

<div class="flex items-center space-x-2">
    <input type="search" placeholder="Search" class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:border-blue-600">
    <button class="bg-blue-600 text-white px-4 py-2 rounded-md">Search</button>
</div>

Complete example

Here is the complete HTML code for a basic sticky navigation bar with some additional design elements, including hover effects, a CTA button, and a search bar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
    <title>Sticky NavBar using Tailwind CSS</title>
</head>
<body class="bg-gray-100">
    <header class="bg-white fixed top-0 w-full shadow-md">
        <nav class="container mx-auto px-6 py-3">
            <div class="flex justify-between items-center">
                <a href="#" class="text-2xl font-bold text-gray-800">MyWebsite</a>
                <div class="hidden md:flex items-center space-x-4">
                    <a href="#" class="text-gray-800 hover:text-blue-600">Home</a>
                    <a href="#" class="text-gray-800 hover:text-blue-600">About</a>
                    <a href="#" class="text-gray-800 hover:text-blue-600">Services</a>
                    <a href="#" class="text-gray-800 hover:text-blue-600">Contact</a>
                    <a href="#" class="bg-blue-600 text-white px-4 py-2 rounded-md">Sign Up</a>
                </div>
                <div class="md:hidden flex items-center">
                    <button class="text-gray-800 focus:outline-none"> <!-- Add a hamburger menu icon here -->
                        <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 12h16M4 18h16"></path>
                        </svg>
                    </button>
                </div>
            </div>
            <div class="mt-4">
                <div class="flex items-center space-x-2">
                    <input type="search" placeholder="Search" class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:border-blue-600 w-full">
                    <button class="bg-blue-600 text-white px-4 py-2 rounded-md">Search</button>
                </div>
            </div>
        </nav>
    </header>
    <!-- Add your page content here -->
</body>
</html>

This example includes hover effects for menu items, a CTA button, and a search bar. You can further customize the design by applying different utility classes or creating your own. Remember to test your designs on various devices and screen sizes to ensure a seamless experience for all users.

Conclusion

In this tutorial, we demonstrated how to create a sticky navigation bar using Tailwind CSS and provided some design ideas to help you customize the look and feel of your NavBar.

By implementing a sticky navigation bar on your website, you can improve user experience and ensure that essential menu items are always easily accessible. To make the design process even more efficient and enjoyable, you can use the Tails Tailwind CSS page builder, which offers a comprehensive library of pre-built UI components, all created with Tailwind CSS.

This intuitive, user-friendly page builder allows you to effortlessly create and customize your website designs using a visual interface, without having to write a single line of code. Remember to test your designs on various devices and screen sizes to ensure a seamless experience for all users.

Top comments (2)

Suraj Vishwakarma • Aug 8 '23

I will try to replicate this in my next article. Thanks for the article. One more thing, you can add the name of the programming language after the triple backtick to highlight the code. Making it more readable.

suraj singh • Aug 20 '23 • Edited

<div class="mt-4 md:w-full w-screen sticky top-0 bg-white"> </div>

HTML Code Description: Sticky Top Header

The given HTML code snippet creates a sticky top header element. It's structured as a div element with the following attributes:

class="mt-4 md:w-full w-screen sticky top-0 bg-white": This attribute assigns multiple CSS classes to the div element for styling and behavior.

mt-4: Adds a margin-top of 4 units, creating space above the element.
md:w-full: Sets the width to full on medium-sized screens and larger.
w-screen: Expands the width to cover the entire screen.
sticky: Makes the element stick to the top of the viewport when scrolling.
top-0: Positions the element at the top of its container or the viewport.
bg-white: Sets the background color of the element to white.

By utilizing these CSS classes, the code creates a header that remains fixed at the top of the screen as the user scrolls. The width spans the entire screen, and it has a white background for contrast. The top margin provides spacing from content below. This setup is particularly useful for creating persistent navigation or header sections that stay accessible to users at all times.

DEV Community

How to Create a Sticky NavBar using Tailwind CSS

Introduction

Step 1: Setting Up the Project

Step 2: Creating the Basic NavBar

Step 3: Making the NavBar Sticky

Step 4: Adding a Shadow

Step 5: Design Inspirations

Complete example

Conclusion

Top comments (2)

Read next

3 Methods of Solving UN-responsive Fonts (w/ CSS)

Exploring Pawapay Deposits, Refunds, and Payouts: A Hands-On Preview

Experimental attribute in C# is a powerful tool : Let's explore

Scraping New Telegram Channels