Theo's Typesafe CultTTC
Theo's Typesafe Cult3y ago
10 replies
tropic

Headless UI Stops Working when Adding addition elements to components

I have this component that I am trying to add a header to from tailwind UI, But when I add the header it no longer works. Here is the link to the repo

I have working.tsx which is working vs index which is not working

https://github.com/Tropic-OSS/Avias-Creations/blob/dev/src/pages/working.tsx

https://github.com/Tropic-OSS/Avias-Creations/blob/dev/src/pages/index.tsx
GitHub
Contribute to Tropic-OSS/Avias-Creations development by creating an account on GitHub.
Avias-Creations/working.tsx at dev · Tropic-OSS/Avias-Creations
GitHub
Contribute to Tropic-OSS/Avias-Creations development by creating an account on GitHub.
Avias-Creations/index.tsx at dev · Tropic-OSS/Avias-Creations
Solution
this div here that you have is staying on top of your nav bar, so you cant click on the nav items
a way that can fix it is to have the <header> tag have "relative z-10" to move it on top of the other one, making the button clickable again
and maybe removing the bg-white because it would look weird then
Was this page helpful?