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:
Let me give that a try. Maybe I will experiment with the more negative z-index value
Did you find a solution for this?
post a link to the pen
yes I did. sorry for the late response