Hey, quick question 👋
My navbar is fixed (z-50). Hero section has AOS animations.
Animations work, but elements appear above navbar when scrolling .
Tried relative, offsets, higher z-index… still happens.
Any trick to keep navbar always on top while keeping AOS smooth? 🙏
17 Replies
how did you solve this?
Keep in mind that transforms and such creates new stacking context, i believe opacity also creates new stacking context if i'm not mistaken. So yeah, this is most likely your issue
Yes, but what is the solution?
without a demo, that's going to be really hard to answer
#Asking Good Questions has info on how you can share working code
I haven't found the solution yet
this is marked as solved
sorry 🙂
remove the tag
@+|-|4||\4t0Ph0|?14 Share your code on codepen or jsfiddle or something like that so we can debug it, we cannot debug it only based on a description. the proper way to debug is to use the devtools.
yeah, without seeing it is just guessing
Ok, wait
Sorry a lot, but this is the first time I’m working on this website, so I don’t know if this is correct or not
It is correct, but you forgot to link to tailwind...
https://codepen.io/tok124/pen/VYexoEm
But i do not see the issue here
And i also don't really know tailwind anyway it it's a pain in the a** to debug... So i leave this to the tailwind experts
Ohh, I’m so sorry, I forgot to add data-aos="fade-right". Can you just add this to this <div> ?
<!-- Hero content -->
<div class="flex flex-col gap-8" data-aos="fade-right">
<!-- Welcome heading -->
<div>
<h1 class="text-3xl sm:text-5xl tracking-wide text-white">Welcome to <span
class="text-[#EDE0D4]">Brew,</span></h1>
</div>
<!-- Main hero tagline -->
<div>
<p class="text-3xl sm:text-5xl lg:text-6xl font-bold text-white">We serve the richest coffee
<br> in the city!
</p>
</div>
<!-- Button to show order form -->
<div>
<button id="showOrderForm"
class="font-medium mt-2 px-8 py-3 rounded-full bg-[#EDE0D4] text-[#251612] border border-[#EDE0D4] hover:bg-transparent hover:text-[#EDE0D4] duration-500 cursor-pointer">Order
Now</button>
</div>
</div>
Ok, Thank you
You can just click here to fork my pen, and you can add it 🙂
