Sticky Navbar not working
I'm having trouble with my Navigation Bar. I want to make it sticky with CSS but it doesn't seem to be working. It stays at the top of the page even though I added nav { position:sticky and top:0; } Ignore the 0px, I actually changed that to 0
6 Replies
The nav will stay at the top until its direct parent scrolls out of view. If the direct parent is the body, it will never scroll out of view.
https://codepen.io/chooking/pen/RwdzQLq
So should I make the header it's parent?
That can work, but you have to give the header enough height. Also, the nav is going to cover other items in the header as you scroll, or the other header items will cover the nav.
This is what my code looks like
It looks like you might have an unclosed div, but that is a separate issue. You already have a wrapper around the nav. Just give it enough height. If you don't give an explicit height greater than the height of the nav, the sticky won't do anything. You will probably need to make this wrapper absolutely positioned too. That will avoid pushing all the other page content down.
Ok
Got it, it works now
Thanks man
@ChooKing