Tailwind CSS Fixed NavBar

Question

I'm trying to create a Fixed Navigation Bar in Tailwind CSS and sticky scroll main page, but no matter what I try, I can't make it work...

Here is what I achieved:

Here is my Code:

<!-- NavBar -->
<header class="fixed bg-blue-600 shadow-md  z-50 w-full px-5 py-2 flex justify-between items-center">
    <router-link to="/" class="text-2xl text-white">My App</router-link>
    <div>
        <router-link to="/login" class="text-white hover:bg-gray-700 px-3 rounded py-1">Login</router-link>
        <router-link to="/register" class="text-white hover:bg-gray-700 px-3 rounded py-1">Register</router-link>
    </div>
</header>
<div class="flex">
    <!-- Sidebar -->
    <aside class="fixed bg-white h-screen py-5 shadow">
        <div class="flex flex-col text-left">
            <router-link to="/" class="hover:bg-gray-400 px-12 py-2 rounded">
                <i class="fa fa-dashboard"></i>
                <span class="">Dashboard</span>    
            </router-link>
        </div>
    </aside>
    <!-- Main Page -->
    <main class="bg-gray-200  flex-1">
        <transition name="slide-fade">
            <router-view></router-view>
        </transition>
    </main>
</div>

Adri w Ukraine · Accepted Answer · 2025-04-24 16:44:43Z

226

If someone is still looking for this, here the solution using the rights tailwind classes.

my layout look like this:

<div>
   <header class="sticky top-0 z-50"></header>
   <main class="relative"></main>
   <footer></footer>
</div>

edited Apr 24 at 16:44

Adri w Ukraine

20.2k19 gold badges107 silver badges140 bronze badges

answered Mar 25, 2021 at 16:32

Mauro

2,5652 gold badges13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

CJ Thompson Over a year ago

This works perfectly in Chrome but is not "sticky" in Safari

jfunk Over a year ago

Just tested in Safari, works fine (aka is sticky) for me.

luxo Over a year ago

Also works for me in Safari as well as Firefox.

AnatuGreen Over a year ago

This is not working in 2022. I am applying it to <nav> and it is just not working. Funny enough 6this is the same on Tailwind docs. Here is what I am doing: <nav className="sticky top-0 flex w-full items-center justify-between py-6">

Zain Over a year ago

Thank you so much. It's working for me. That's what I did: <header className="sticky top-0 z-50"> <div className="relative"> <nav> </nav> </div> </header>

Anant · Accepted Answer · 2021-01-05 10:41:32Z

16

Here is the solution by using only Flex box.

CodeSandbox link

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Sticky-header-and-footer-with-tailwind</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <div class="flex flex-col h-screen">
      <header class="py-5 bg-gray-700 text-white text-center">
        Sticky Header and Footer with Tailwind
      </header>
      <main class="flex-1 overflow-y-auto p-5">
        What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing
        and typesetting industry. Lorem Ipsum has been the industry's standard
        dummy text ever since the 1500s, when an unknown printer took a galley
        of type and scrambled it to make a type specimen book. It has survived
        not only five centuries, but also the leap into electronic typesetting,
        the 1914 translation by H. Rackham.
      </main>
      <footer class="py-5 bg-gray-700 text-center text-white">
        Tailwind is Awesome 😎
      </footer>
    </div>
  </body>
</html>

answered Jan 5, 2021 at 10:41

Anant

1,7042 gold badges13 silver badges9 bronze badges

1 Comment

Savandy Over a year ago

There is scrolling problems using this approach on iphone, chrome. There appears to be 2 different scrolls and not working properly when you go all the way down.

Kamal Panara · Accepted Answer · 2021-07-06 12:13:52Z

Using 'Fixed NavBar' in Tailwind. Here is the template code for you to get started:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tailwind Starter Template - Fixed Header : Tailwind Toolbox</title>
    <meta name="author" content="name">
    <meta name="description" content="description here">
    <meta name="keywords" content="keywords,here">
    <link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet"> <!--Replace with your tailwind.css once created-->
    <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet"> <!--Totally optional :) -->
    
</head>
<body class="bg-gray-400 font-sans leading-normal tracking-normal">

    <!--Nav-->
    <nav class="bg-gray-800 p-2 mt-0 fixed w-full z-10 top-0">
        <div class="container mx-auto flex flex-wrap items-center">
            <div class="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold">
                <a class="text-white no-underline hover:text-white hover:no-underline" href="#">
                    <span class="text-2xl pl-2"><i class="em em-grinning"></i> Brand McBrandface</span>
                </a>
            </div>
            <div class="flex w-full pt-2 content-center justify-between md:w-1/2 md:justify-end">
                <ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
                  <li class="mr-3">
                    <a class="inline-block py-2 px-4 text-white no-underline" href="#">Active</a>
                  </li>
                  <li class="mr-3">
                    <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a>
                  </li>
                  <li class="mr-3">
                    <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a>
                  </li>
                    <li class="mr-3">
                    <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a>
                  </li>
                </ul>
            </div>
        </div>
    </nav>


    <!--Container-->
    <div class="container shadow-lg mx-auto bg-white mt-24 md:mt-16 h-screen">
        
    <p>Here you Go!</p>
        
    </div>


</body>
</html>

nipun-kavishka · Accepted Answer · 2022-11-28 16:09:40Z

5

Another simple combination you can try.

<nav class="w-full fixed top-0 z-50">

  <!--Your content inside navbar -->
  <div class="container-fluid"></div>

</nav>

According to the given source code, it should be like this.

<div>
   <header class="fixed top-0 z-50"></header>
   <main class=relative></main>
   <footer></footer>
</div>

answered Nov 28, 2022 at 16:09

nipun-kavishka

9221 gold badge13 silver badges22 bronze badges

Comments

Hitesh Chauhan · Accepted Answer · 2021-03-16 08:57:06Z

Try Flex in Tailwind Navbar

<link href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<nav class="bg-gray-100 fixed inset-x-0">
      <div class="max-w-6xl mx-auto px-4">
        <div class="flex justify-between">
            <div class="flex space-x-4">
                <!-- logo -->
                 <div> <a href="#" class="flex items-center py-5 px-2 text-gray-700 hover:text-gray-900"> <i class='bx bxl-medium-old mr-1 text-xl mb-1 text-blue-400'></i> 
        <span class="font-bold">Moto Dev</span> </a> </div> <!-- primary nav -->
                <div class="hidden md:flex items-center space-x-1"> <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">Home</a> <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">Contact</a> <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">Pricing</a> <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">Features</a> </div>
            </div> <!-- secondary nav -->
            <div class="hidden md:flex items-center space-x-1"> <a href="" class="py-5 px-3">Login</a> <a href="" class="py-2 px-3 bg-yellow-400 text-white hover:bg-yellow-300 text-sm hover:text-yellow-800 rounded transition duration-300">Signup</a> </div> <!-- mobile button goes here -->
            <div class="md:hidden flex items-center"> <button class="mobile-menu-button focus:outline-none"> <i class='bx bx-menu text-3xl mt-1'></i> </button> </div>
        </div>
      </div> <!-- mobile menu -->
         <div class="mobile-menu hidden md:hidden"> <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">Home</a> <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">Contact</a> <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">Pricing</a> 
    <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">Features</a> </div>
       </nav>
<!-- content goes here -->
     <div class="py-32 bg-red-500 h-screen p-3"> </div>

Or Visit Tailwind CSS Navbar

Collectives™ on Stack Overflow

Tailwind CSS Fixed NavBar

5 Answers 5

5 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related