Question 42687 in Html Question posted in
Some basic documentation can be found here.

Why does my Navbar not stick to the top even tho I gave it the attributes for it? – Html

I am lost guys.

I want my Navbar to be sticky to the top but it doenst work and I cant find a solution. Ive tried for so long I gave up and wanted to ask here. I tried the "fixed", t-0, etc. I am using tailwindcss Thanks for any answers.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text1</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-[url('https://hips.hearstapps.com/hmg-prod/images/cute-cat-photos-1593441022.jpg?crop=1.00xw:0.753xh;0,0.153xh&resize=1200:*')] h-screen bg-center bg-cover bg-no-repeat backdrop-blur">
        <nav class="flex absolute fixed top-0 z-10 justify-between h-16 w-full bg-gray-800 px-5 items-center font-semibold text-xl text-white font-sans border-b-4 border-black">
            <div class="w-1/6">
                <a  href="#" class="font-bold">Text1</a>
            </div>
            <div class="space-x-10 ">
                <a href="#" class="p-4 hover:bg-gray-600 active:bg-gray-400">Text1</a>
                <a href="#" class="p-4 hover:bg-gray-600 active:bg-gray-400">Text1</a>
                <a href="#" class="p-4 hover:bg-gray-600 active:bg-gray-400">Text1</a>
                <a href="#" class="p-4 hover:bg-gray-600 active:bg-gray-400">Text1</a>
            </div>
            <div class="w-1/6">
            </div>
        </nav>
        <div class="flex z-10 justify-center items-center m-80 pt-5 justify-center font-bold text-white font-sans text-6xl border-4 bg-gray-800 rounded-full border-black">
            <h1>
                Text1
                <p class="p-10 text-4xl">
                    Text1
                </p>
            </h1>
        </div>
        <div class="h-screen w-screen">
        </div>
</body>
</html>

https://play.tailwindcss.com/WgQVpNTRUr

here is a tailwind play if anybody needs it.

Tags:

2

Answers


  1. 0

    The backdrop-blur on the <body> element applies a filter value, which causes the <body> to introduce a new stacking context and stops the fixed (I assume you meant this instead of the absolute also applied) from working. Removing the backdrop-blur should make the navigation bar be fixed to the viewport. See this Tailwind Play for the live example.

    Login or Signup to reply.
  2. 0

    Your issue is passing both absolute and fixed classes to your nav element, where instead they should be exchanged for the sticky class so that it sticks on top, like:

    // ..
<nav class="flex sticky top-0 z-10 justify-between h-16 w-full bg-gray-800 px-5 items-center font-semibold text-xl text-white font-sans border-b-4 border-black">
// ..
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search