2

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.

  • share your full code – Temani Afif Apr 30 '19 at 23:10
  • some related question (if not duplicates): https://stackoverflow.com/a/55660054/8620333 / https://stackoverflow.com/a/54610362/8620333 / https://stackoverflow.com/a/55689076/8620333 / https://stackoverflow.com/a/52997848/8620333 – Temani Afif Apr 30 '19 at 23:12
  • @TemaniAfif My `` tag consists of the navigation bar (mentioned above) and some `

    ` elements, to make the page scrollable. That's all. I don't think I need to mention my whole code.

     –  Apr 30 '19 at 23:23
  • Yes you have to. We cannot know what your code contain if you don't tell us and your issue is closely related to your *whole* code. If we are not able to reproduce your issue given your code, no one can help you – Temani Afif Apr 30 '19 at 23:25
  • here is the code you shared: https://jsfiddle.net/zqbh569f/ there is no issue so we need more detail and more code – Temani Afif Apr 30 '19 at 23:27

2 Answers2

3

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>
pauldrodriguez
  • 480
  • 2
  • 6
1

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>
MichaelvE
  • 2,558
  • 2
  • 9
  • 18