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

Answer 1

You Just Need to Give Some Top-Margin to your FlexBox as I have Given In Code Below.

And check out the sample here.

Have a Look at this 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 mt-24 md:mt-16">
    <!-- 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>