Need Suggestion for creating a sticky nav bar?

matthewjohn938 · February 16, 2019, 6:09am

What is the best way to create a sticky top navigation bar?

Under a smaller navbar, I have a main navbar and I want the main navbar to be sticky when the page scrolls. I have tried (position: fixed), but when it scrolls, it leaves a space where the bar above it is.

Could you please suggest me the best way to do this?

Thanks

Just-B · February 16, 2019, 4:03pm

I doubt anyone can give you a definitive answer to that question without seeing the page you’re describing and analyzing the code you’ve written.

iraszl · February 16, 2019, 4:15pm

Do you mean that the smaller navbar should collapse when people scroll and the main navbar should move to the top? If the main navbar should move, ‘fixed’ is not going to work, right?

creativeboost · February 19, 2019, 12:54am

Position: fixed is typically what you’d use, but it would depend on what else is going on in that area. It sounds like the “space” you’re seeing above the bar is what the small nav occupies. There might be an easy fix such as top: 0. Provide a link here or in a message and I’ll take a look.