Navbar not displaying over other elements

Hi all,

First time poster here.

I’m struggling on the product page challenge. My problem is that my navbar is not displaying over the rest of my page when I scroll down.

Currently it is set up as position: fixed, which normally does the job. For some reason it is not working.

I’ve tried changing the z-index of my other sections and put my header on top and this hasn’t worked.

I’ve also tried giving a different background color and played around with opacity settings. Still no result.

I have done this challenge before and not encountered this problem. There must be something silly in my code that I can’t find. I think I need another set of eyes.

Here is my codepen to the challenge.

N.B. I have used a CSS reset which I haven’t included in my codepen. Taking this off doesn’t make a difference.

And I’ve added some lorem just to make my page scrollable.

Any help with this would be most appreciated.



  • You will definitely need to make the z-index of the header larger than everything else if you want it to be on top
  • Have you tried applying a background color to the header?

Thanks for the reply.

I needed to add both a background-color and put the z-index to greater than 2.

2 hours wasted on this small part! Thanks so much for your help.