I have a subsidiary menu which is considered the main menu which I would like to make the sticky

Question

I made it fixed so it travels down the page when you scroll and put a high zindex on it to allow it to sit on top of everything else but how do i fix the gap? I can't simply remove the top: 42px; because than it wouldn't look right when the page is at the very top.

Here's what it looks likeafter changing css:

Answer 1

.navbar {
   position: sticky 
}

For such a task it is not entirely correct to use fixed, it is better to use sticky