Tailwind CSS: How to Create a Sticky/Affix NavBar

Updated: May 7, 2022 By: A Goodman One comment

This concise article shows you how to create a sticky/affix navigation bar with only Tailwind CSS (no Javascript code or any extra CSS is required).

Table Of Contents


In general, the position of a sticky navbar is relative (it will scroll down like other elements) until it crosses a specified threshold, then its position becomes fixed until its parent is off-screen.

With Tailwind CSS, we can simply implement a sticky navigation bar by using the sticky and top-0 utility classes, like so:

<nav class="sticky top-0 [other classes here]">
  <!-- nav items here -->

For more clarity, see the full example below.



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>

        <header class="bg-green-600 p-20">
            <h1 class="text-white text-4xl text-center">Header</h1>
            <h2 class="text-white text-xl text-center">Scroll down to see the effect</h2>
        <nav class="sticky top-0 bg-blue-600 p-5 drop-shadow shadow-blue-600">
            <h1 class="text-white text-4xl text-center">Sticky Nav Bar</h1>
        <div class="h-screen">
            <h1 class="text-4xl text-center p-20">Content</h1>
        <footer class="h-96 p-20 bg-red-600">
            <h1 class="text-white text-4xl text-center p-20">Footer</h1>

That’s it. Further reading:

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

Notify of
1 Comment
Inline Feedbacks
View all comments
2 years ago

This was great. Thank you

Related Articles