Transparent mobile header

Hi guys,

The “transparent menu bar” check box on the page settings works perfectly for the desktop version, but not for the mobile or tablet version?
To get the mobile version and the tablet version to appear the same as the desktop version, I have inserted the following code to show the Header Image:

@media only screen and (max-width: 1024px) {
      .sydney-hero-area .header-image {
        background-image: url(https://extramile.org.za/wp-content/uploads/2022/08/cropped-cropped-P9301784-scaled-1.jpg);
        height: 100px !important;
      }
    }

That works, but how do I get the menu to overlay transparently over the image?

The page I need help with: [log in to see the link]