Mobile Menu Hidden behind Header Video

When I click on the hamburger, the menu drops down behind the header video (youtube). If I use the CSS .wp-custom-header {z-index:-1;} it fixes the mobile menu so it’s no longer behind the header video, but then I can no longer click to play the Youtube video. How can I get the menu to appear on front and still be able to click the play button on the video? Thanks in advance.

Hello there,

Please try the below CSS code:

    .btn-menu, 
    #mainnav-mobi {
      z-index: 99999 !important;
    } 

Regards,
Kharis

Thanks, but I still can’t click on the play button with that.

Hello there,

Please share a link to your site, so I can exactly see what’s happening in there.

Regards,
Kharis

Thanks,
Nicole

Sprocket Tech Website Design
914-362-8646
www.Sprocket-Tech.com http://www.Sprocket-Tech.com?em

Thank you for sharing Nicole.

Please try adding this CSS code:

    .sydney-hero-area .fluid-width-video-wrapper {
      z-index: 9999 !important;
    }

    .wp-custom-header:before {
      display: none;
    } 

Regards,
Kharis

Thanks, I had tried something similar before and I tried that too, but I still can’t click the play button with what you provided. The button works fine until I use .wp-custom-header {z-index:-1;} to prevent the menu from being hidden.

Any other suggestions? Otherwise I will need to display the header image instead of the video.

Hello there,

Please try adding this CSS code:

    .wp-custom-header:before {
      display: none !important;
    } 

Clear any applied site cache as it usually prevents the code addition from taking effect. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

If it doesn’t help, try disabling CSS script compression temporarily.

Regards,
Kharis

Thanks, I tried all you suggested to no avail. However, I don’t think the issue has anything to do with .wp-custom-header:before anyway as it is disabled on mobile devices and the button functions properly when the menu is hidden behind it.

Any other suggestions? Otherwise what is the best way to disable the video on mobile only and display the default header image?

Hello there,

Please try adding the below CSS code to display static header image on mobile device.

    @media only screen and (max-width: 1024px) {

      .sydney-hero-area {
        background-image: url('https://poundridgepainting.com/wp-content/uploads/2018/02/header.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
      }

      .sydney-hero-area .wp-custom-header {
        opacity: 0;
      }
      
    } 

Regards,
Kharis

Thank you. Please let me know if you ever find a solution for the menu/video issue.

Hello there,

Try adding this extra CSS code:

    .sydney-hero-area {
       z-index: -1; 
    }

Regards,
Kharis