Help - Landing Page navbar sticky

Code Feedback
1

Looking for help with my Landing Page. It passed all tests apart from the navbar staying at the top of the viewport at all times. I’ve used position: sticky on both the header and navbar and it doesn’t seem to be working.

Any guidance would be much appreciated.

https://codepen.io/mikebish13/pen/dyyPLOR

2

do this position: fixed; top: 0; i think this will work :slight_smile:

3 
 header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #84BC9C;
}
1 Like
4

It worked, thanks very much!

Could you explain why position: fixed worked but position: sticky didn’t? Is there a difference between the two?

5

i have no clue but it seems to work i found an answer to your question

position: fixed always fixates an element to some position within its scrolling container or the viewport. No matter how you scroll its container, it will remain in the exact same position and not affect the flow of other elements within the container.

Without going into specific details, position: sticky basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed , causing the element to “stick” to its position instead of being scrolled out of view. It eventually gets unstuck as it gets scrolled back toward its original position

2 Likes
6

The sticky positioning won’t work on your page because you have a div element that wraps the whole page, including your header. I’m talking about the one with id="page-wrapper". The element that you want to be sticky should be a direct child of the body element. If you just get rid of the div element I mentioned, position: sticky should work just fine :slight_smile: Oh, and you also need to specify top: 0; so that the element knows which part of the page it should stick to :smiley: Hope this helps!

1 Like
7

Yep, makes perfect sense! Thanks very much for your help!

1 Like