Kevin Powell - Community•12mo ago

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•12mo 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.

jacobOP•12mo ago

you are right, I accidentally put it in a section with 100vh tysm

clevermissfox•12mo ago

Glad you fixed it!! Mistakes are literally the best way to learn

Gaming

Programming

Sticky Floating Navbar Disappearing