Video Player Covering Sitcky Header

[ppenrose1408]

Have a few videos embedded on Portfolio Page and when scrolling the Video Elements cover the Sticky Header.

[Kyle – SUPPORT]

Hi

If you can provide me with your link I will be able to give you some custom css to fix the issue 🙂

– Kyle

[ppenrose1408]

This reply has been marked as private.

[Kyle – SUPPORT]

It’s not happening for me, which browser are you using?

– Kyle

[ppenrose1408]

Firefox 27.0.1…

I just checked with Chrome and didn’t have the issue there either. Odd.

[Kyle – SUPPORT]

I don’t get the issue on firefox either, please try clearing your cache and check again 🙂

– Kyle

[ppenrose1408]

Still happening in Firefox. Not sure either. Not the end of the world, but would be nice to know if there is an easy fix.

[Kyle – SUPPORT]

You could try:

header {
  z-index: 9999;
}

But there’s a chance that it may cause other issues.

– Kyle

[ppenrose1408]

No dice. Still covers it in Firefox. Again not a huge deal but if someone has a fix let me know. Thanks as always for the great support you all provide. For an absolute novice I’ve been amazed at the site I’ve been able to create using the tools within your theme and the knowledge available on the forums etc.

[Kyle – SUPPORT]

Ok no problem, I’ll bear it in mind.

Thanks for the kind words! 🙂

– Kyle

[manciaz]

Hi guys,
I’ve just realized I had the same issue of ppenrose1408 (video covered by header using Firefox 27).
I fixed adding

#header-section .is-sticky #main-nav.sticky-header {
    backface-visibility: visible !important;
}

Z-index, that should have solved, doesn’t seem to work.
Of course I don’t know why of both, I just try things.

[Kyle – SUPPORT]

Thanks! @manciaz

[ppenrose1408]

Assume I was to put that in the custom CSS section which I did, but still have the same issue. Am I doing something incorrect? I see above your issue was the video being covered by header “(video covered by header using Firefox 27)” but I assume that was just typed backwards and you too were seeing the header covered by the video…

[manciaz]

Yes ppenrose, it’s just an error of typing. I had header covered by video. I had your issue and solved in that way… I don’t know why z-index doesn’t work (as it should). You can check the correct class using Firebug, looking for that backface-visibility attribute on header. I changed backface-visibility from hidden (the dafault value I found) to “visible” (it worked for me and I stopped) but it’s just a lucky try, maybe a correct override is different. If you want link me your URL so that I can try.

[manciaz]

Look at attached image, that’s what happens to my site in FF, before and after adding that code in custom CSS box