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 -->

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>

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

    <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>
        <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>


That’s it. Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

Notify of
Inline Feedbacks
View all comments

Related Articles