Video overlapping

Hello friends!!
I have an issue on the Product Landing Page. The embedded video when viewed on my desktop doesn’t overlap the fixed nav bar(header). But when I view it on a mobile device(phone), the video when I scroll overlaps the fixed nav bar. Please how do I resolve this…?

so just to clarify, as you scroll , you want the video element to go under the nav-bar (and currently it goes over the nav-bar?)

If yes, then use z-index setting on your nav-bar to force it to always be on top. (eg. z-index: 1;)

I have done so, but it seems not to be working well on mobile phones.
Without the z-index, it works well on my laptop but with or without it, it doesn’t seem to respond on phone

I googled this and someone suggests to set the z-index to a very large number to see if it helps…

and someone else suggests to set a very negative z-index on the item that is overlapping the nav-bar…

also please read this:
https://sevenspark.com/diagnosis/z-index-submenu-hidden-behind-content

1 Like

Let me give that a try. Maybe I will experiment with the more negative z-index value

1 Like

Did you find a solution for this?

post a link to the pen

yes I did. sorry for the late response