Jump to content

Alafair

Member
  • Posts

    2
  • Joined

  • Last visited

Alafair's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. 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); } }
  2. 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?
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.