Navbar not displaying over other elements

[riyazmader]

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.

Product_Landing_Page

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.

Thanks,

Riyaz

[bbsmooth]

• 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?

[riyazmader]

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.