sticky class doesn't behave as expected. #13857

ALSHIHAB · 2024-06-18T23:03:51Z

ALSHIHAB
Jun 18, 2024

I have a header with 3 layers and I want to make the menu sticky when scroll. While I have to keep the header tag, when removing the header/div tag it works otherwise it didn't. below is the given code.

<body class="bg-gray-100">
  <header class="w-full"> <!-- if remove this tag it works fine -->
    <div class="h-8 bg-gray-300 py-1 text-gray-500">Top bar</div>
    <div class="h-8 bg-blue-300">Logo bar</div>
    <nav class="sticky top-0 z-50 bg-white text-gray-500 shadow">
      <div>Main menu</div>
    </nav>
  </header>
  <main class="bg-green-300">
    <div class="h-screen py-20">Main content</div>
  </main>
</body>

wongjn · 2024-06-19T06:43:23Z

wongjn
Jun 19, 2024
Collaborator

So a sticky element is only sticky within it's parent element. Thus, removing the <header> means the <nav> is sticky in the <body>, as opposed to the <header>. You may need to use a JavaScript solution instead.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

sticky class doesn't behave as expected. #13857

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

sticky class doesn't behave as expected. #13857

Uh oh!

ALSHIHAB Jun 18, 2024

Replies: 1 comment

Uh oh!

wongjn Jun 19, 2024 Collaborator

ALSHIHAB
Jun 18, 2024

wongjn
Jun 19, 2024
Collaborator