Build a Product Landing Page - nav bar

Build a Product Landing Page - nav bar
0

#1

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:


#2

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. :slight_smile:


#3

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 :sunglasses: