Custom submenu text behind content on page

Hi everyone,

Here is my site

Password to site page is "00000000" (eight 0s).

I currently have a custom menu (not the main pages menu) that uses a code block and custom css to stylize. Currently, the submenu is hidden on mobile, but I wanted to make a floating hamburger menu icon that can open the menu on a black screen.

Currently, toggling the hamburger icon, the menu items are behind the content on the page (see image). I've tried upping the z-index to 99, 1000, 9999, etc., and it continues to be behind the text and overall contents. How can I get this to be on top of everything? I made sure my code block is also brought to the front. 

Here is my code: 

/* Hamburger Menu Button Styling */
.hamburger-menu button {
    background-color: #fdeb01; 
    color: black; 
    font-size: 24px;
    border: none;
    border-radius: 50%;
    width: 50px; 
    height: 50px; 
    cursor: pointer;
    display: none; 
    position: fixed; 
    right: 20px; 
    top: 20px; 
    z-index: 9999;
      bottom: 20px;
      right: 20px;
      top: auto;
  
}

@media (max-width: 768px) {
    .hamburger-menu button {
        display: block; /* Show button on mobile */
    }

    #custom-submenu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%; 
        height: 100%;
        background-color:#000000;
        overflow-y: auto;
        z-index: 99;
    }

    #custom-submenu ul {
        padding-top: 60px; 
    }
}

TIA!

I tried checking and it looks fine. Did you solve problem?