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);
}
}