Tailwind CSS: How to Create a Fixed Top Menu Bar

Updated: May 8, 2022 By: A Goodman Post a comment

In Tailwind CSS, you can easily implement a fixed top NavBar by using the fixed and z-index utilities, like so:

<nav class="fixed z-100">
    <!-- nav content here -->
</nav>

Here’s a full example:

Note: If you’re using Safari, this demo video might not work nicely or not start at all. Please use Chrome, Edge, Firefox, or another web browser instead.

The complete code:

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>KindaCode.com</title>
</head>

<body>
    <nav class="top-0 z-100 fixed w-full bg-blue-600 py-5 px-10">
        <h4 class="text-white font-bold">KindaCode.com</h4>
    </nav>
    <main>
        <div class="w-screen h-96 bg-amber-500"></div>
        <div class="w-screen h-screen bg-red-500"></div>
        <div class="w-screen h-screen bg-green-500"></div>
    </main>
</body>

</html>

That’s it. Further reading: