Navbar obscuring content: UI layout bug?
Is it just me or is your demo website's top navbar obscuring the actual pages/content without any offset to allow the user to access the content behind the navbar?
In this example the title 'Account Information' is being obscured and the user cannot scroll further to reveal it.
8 Replies
Hi @cassofthenight. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Wohooo @cassofthenight, you just became a Waspeteer level 2!
----------------------
Hmm, I don't know enough to give you a confident answer yet. The knowledge sources provided do not contain information about a UI layout bug involving the navbar obscuring content on the Wasp demo website.
For more information or to report a bug, you might want to check out the Wasp Github Issues (https://github.com/wasp-lang/wasp/issues) page.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @cassofthenight, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
oh yeah you're right @cassofthenight hmm when did that happen? there used to be a generous offset between the navbar and content, which seems to have been changed at some point.
ah i see. someone removed the
sticky property from the navbar and I merged it without checking
try adding sticky to line 29 of app/src/client/components/AppNavBar.tsx
not sure if that's the behaviour you'd like, but it fixes the issue
Yes, this seems to have fixed it for now; thanks.
i believe you just want to add
sticky without positon https://tailwindcss.com/docs/position#sticky-positioning-elementsPosition - Tailwind CSS
Utilities for controlling how an element is positioned in the DOM.
Oh, shoot, you're right! I haven't used tailwind before 🫢 😊
no worries 🙂