Need Suggestion for creating a sticky nav bar?

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?


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.

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?

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.

©2019 Graphic Design Forum | Contact | Legal | Twitter | Facebook