KPC
Kevin Powell - Community•5mo ago
jacob

Sticky Floating Navbar Disappearing

I want to create a floating sticky navbar for my website. The problem is that once I scroll past the full viewport, the navbar disappears. I am using react and panda-css. 
<nav className={css({
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  position: "sticky",
  top: "0"
})} />
<nav className={css({
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  position: "sticky",
  top: "0"
})} />
3 Replies
clevermissfox
clevermissfox•5mo ago
Is the navbar in a section that ends right as it disappears? You would want it to be a direct child of the body tag to always be in view otherwise when the section it's in ends, as you see it goes with that section.
jacob
jacob•5mo ago
you are right, I accidentally put it in a section with 100vh tysm
clevermissfox
clevermissfox•5mo ago
Glad you fixed it!! Mistakes are literally the best way to learn
Want results from more Discord servers?
Add your server
More Posts
Margin/Justified issueshttps://codepen.io/Miss-Fox/pen/NWJgRjB?editors=0100 So I'm trying to emulate a swipe so that if onHover prbHello, i have prb when i hover the picture the size increase and the border-bottom-radius appear anunable to deploy to gh-pages using parcel buildgood evening everyone please i am stuck with deploying to gh-pages my parcel build website. i have uGetting content more centered layoutim trying to get this layout more centered with some gap between city text and the tables of weatherNew to JavaScriptI learned JavaScript, CSS, and HTML around November on freecodecamp, but I was focusing on HTML and Component page flashI've made a component that uses flexbox, though I wanted to make sure that the container fills baseddiscount calculatorI realise a discount calculator who should show on the bottom : first: the name of the product secohow can i make a sort of hidden list?like want a list with anchor tags to pop of when pressedUsing grid to lay out a website, avoiding potential use of dvhHi, so I have really two questions that go hand in hand. See, I am new in this whole "using grids tDiv Alignment Not Working For MeOk I generally prefer live help but gonna give this a shot.. I am working on an alert for OBS/Stream