Hi.
Even though the nav bar is fixed to the top of the viewport, it’s not passing the user story, and when I scroll down, the video element overlaps the nav bar.
I would be grateful to know how to fix this please.
Here’s my CodePen page:
Hi,
I have managed to find the reason you are not passing the “fixed to the top of the viewport” test. You have a div element surrounding you nav element, which you need to remove (lines 14/24).
The test is is looking for either the #header or one of it’s children to be fixed to the top. Because of the div, the fixed element is not a direct child of #header and so the test won’t pass. Take a look at this if you want to know more (its based on css but the principles are the same):
https://www.w3schools.com/cssref/sel_element_gt.asp
The video element overlapping is straight forward (once you know how!). You need to set the z-index property, take a look at:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
(just set the z-index on the header to something > 0)
You have one final test not passing- you need to use a flex element somewhere outside of the media query as the test won’t recognise them inside it.
Hope this helps and that I haven’t waffled too much. 
3 Likes
Hi Oliver.
Your suggestion worked a treat. I deleted the div and gave the nav a greater z-index than the video. The nav-bar test now passes.
Cheers!
Sean 