Custom second header on mobile

We are having difficulty adding a second custom header above the default squarespace header using custom code. Specifically in placing header elements displayed overlayed. Using z-index isn’t working to get custom elements to overlay on top of the default header. How can we get custom DOM elements to display on top of the squarespace header?

1 hour ago, Alafair said:

We are having difficulty adding a second custom header above the default squarespace header using custom code. Specifically in placing header elements displayed overlayed. Using z-index isn’t working to get custom elements to overlay on top of the default header. How can we get custom DOM elements to display on top of the squarespace header?

Can you share your site with the protected password so I can take a look?

Hi thanks for your response! Before sharing access to our site, let me give a bit more detail with some screenshots.

In "screenshot 1" you can see the custom orange header we created separate from the squarespace header.

"screenshot 2" shows the default squarespace header dropdown menu.

"screenshot 3" shows the custom header dropdown menu. The issue is that the custom header dropdown menu displays, but is not clickable because both header dropdown menus are loading (the default dropdown menu is hidden via custom code. We really just need to get the custom header dropdown menu working, so if there is simpler / better code for that then that works too.

The javascript code for the custom dropdown menu is below. (I left in some of the comments so you can see what I've been trying).

Thanks for any help you can provide! This fix is urgent so if you are available please respond as soon as you can. :) 

function myFunction() {
    console.log("myFunction");

    var y = document.getElementsByClassName("special-burger");

    if (y[0].classList.contains("burger--active")) {
        document.body.classList.remove("header--menu-open");
        y[0].classList.remove("burger--active");

    } else { 
       y[0].className += " burger--active";
       document.body.classList.add("header--menu-open");
       //document.getElementById("special-body").style.display = "flex";
       //document.getElementById("special-nav-item-mobile-test").style.display = "block";

       document.getElementsByClassName("header-menu")[0].style.opacity="0";
      // document.getElementsByClassName("header-menu")[0].style.display="none";
       //document.getElementsByClassName("header-menu")[0].style.z-index="-1";
       document.getElementsByClassName("special-header-menu")[0].style.opacity="1";
       //document.body.classList.add("header--menu-open");
      // document.getElementById("special-body").style.display = "block";
      // document.getElementsByClassName("header-menu-nav-folder--active")[0].style.background-color="#FF8500";

     // console.log(y);
    }
  }