Links not working when on top of Background Video

Design help General
1

This is similar to this topic from 2022, but there was no help there.

Basically, no links or link blocks are working when they are on top of Background Video. This is true not only when the links are statically positioned on top of the video, but in my case, I have a simple sticky navigation bar with links, and they all become unresponsive once the nav bar has scrolled to be on top of the Background Video that’s positioned further down the page.

Any suggestions on how to solve this?

2

Need to see your project for more details

3

I will link it asap once I have the OK, but there’s really nothing more to it, you can even test with a blank page, add a bg video element and a link that appears over the video in any way.

The background video element can even be totally empty (no file uploaded) and it simply disables all link blocks positioned over it.

4

So maybe need to set a z-index for your link block, or just don’t place any elements into bg video and use a bg video with position: absolute…

5

Setting a z-index was a good idea but it doesn’t seem to help, and unfortunately as I said I am not placing anything into the bg video itself, but I have a sticky navbar on the top of the page that eventually overlaps the video as you scroll down the page and all links and dropdowns in it literally stop working once it’s over the bg video area.

6

We can speak about this a long time, but if you want to solve the issue — just provide your Read-Only link🙂

7

Link to a demo project demonstrating the issue very clearly.

  1. Without scrolling, hover over the links in the navbar, I have them turn a glaring red. Test that the dropdown links also behave.
  2. Scroll down so that the nav links are over the background video (it’s empty and it shows as white in the preview, so I gave it a shadow so you can see it) and hover over them - it’s as if they’re not even there.

Feel free to check that there’s no weird thing going on, this is literally an empty project with a navbar and a bg video, I changed nothing else and it still breaks. Thanks :smiley:

8

Just set z-index for your Navbar)

image
image3094×1532 283 KB

9

This is insane, I had set a Z-index but it wasn’t on the topmost-level section and it didn’t work - I applied it on the section and it seems to be working fine. Thank you so much for your time!