Video background's heading and description showing over header menu on mobile

Store Design
,
1

Hey,

I’m experiencing a problem with my video background’s heading and description which causes them to be seen through the navigation menu on mobile. Screenshots of the problem:

DELTE LATER.png
DELTE LATER.png1000×490 170 KB

I’ve used custom Liquid and HTML code I’ve found online to create a video background section for my website. Code can be found here: https://ecomexperts.io/blogs/liquid-tutorial-shopify/background-video

Though for some reason the background’s heading and description would not display on mobile, so I’ve added the code mentioned below to theme.liquid which I’ve got from ChatGPT. In turn, my text now appears over the video but also over my navigation menu.

I’d really appreciate any sort of help here, as I am inexperienced in coding and quite frankly don’t really know what I’m doing. Thank you.

<style>
  @media screen and (max-width: 767px) {
    .videoBackground .videoBox {
      min-height: 300px !important;
    }
      .videoBackground .videoBoxInfo {
      padding: 20px;
      background: transparent;
      width: 100%;
      position: absolute;
      z-index: 9999;
      text-align: center;
      margin-bottom: 70px;
    }
    .videoBackground .videoBoxInfo h1,
    .videoBackground .videoBoxInfo p {
      font-size: 14px; 
     
    }
    .videoBackground .videoBoxInfo h1 {
      margin-bottom: -10px;
      display: block; 
      font-size: 30px; 
  }
    
</style>