Fix “sticky” navigation bar on top of the screen

Question

So, I've been trying to create a navigation bar, using HTML and CSS that will "stick" to the top of the page, even when the user scrolls down. Used the position: sticky tag to do it. The problem is, I am not able to fix the div at the top of the page.

That's my CSS:

.bar {
  position:sticky;
  top:0;
  color: white;
  background-color: black
}

p {
  display: inline;
}

... and my HTML code:

<nav class="bar">
  <p>Home</p>
  <p>Info</p>
  <p>Contact Us</p>
</nav>

The sticky propriety works. The problem is, bar is not "fixed" at the top of the page. I know. Not the best word used for the explanation. I just want it to be there, without any margins. Tried to reduce from the body's padding/margins but didn't work. What can I do?

Another question: what does really top:0 do? The position:sticky propriety doesn't work without it and I want to know why.

Answer 1

sticky positioning will be treated as relative positioned until you start scrolling down. so if the parent of the sticky element has some margin/padding it will affect the element.

you might want to try fixed positioning so that the element is always fixed at the top without any margin.

of course, fixed element removes the gap of where the element was supposed to be so you content might overlap and will need to add another element with the same height as your fixed element to fix overlapping content.

see below for example.

 .bar { position:fixed; top:0; color: white; background-color: black; width:100%; left:0; } p { display: inline; } 

 <nav class="bar"> <p>Home</p> <p>Info</p> <p>Contact Us</p> </nav> <div style="height:1000px"> </div> 

Answer 2

To solve the margin issue on your navbar, it can be a good idea to put in a reset at the top of your CSS code to override the browser defaults. Here I've set the margins and paddings on all the elements to 0. Since it's at the top, any styles following it will override the reset, and you can customise to your heart's content.

The Top attribute is necessary for the position sticky to work because the browser needs to determine the final location of the element. Left, Right and Bottom attributes will also do the job.

 * { margin: 0px; padding: 0px; } .bar { position: -webkit-sticky; position: sticky; top: 0; color: white; background-color: black } p { display: inline; } .demoFiller { background-color: coral; } 

 <nav class="bar"> <p>Home</p> <p>Info</p> <p>Contact Us</p> </nav> <div class="demoFiller"> 0<br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 0 <br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 0 <br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 0 <br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 0 <br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 0 <br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 0 <br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 0 <br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 0 <br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 0 <br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 0 <br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 0 <br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 0 <br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 0 <br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 0 <br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 0 <br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 0 <br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> </div>