Jump to content

Custom second header on mobile

Recommended Posts

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?

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

 

 

image.thumb.png.8dd1accc70822a5640641b2709131331.png

 

image.thumb.png.9b579e351726de05cc01487be892c59d.png

 

image.thumb.png.c1d45388f1c125a1ef12d4bfbbc2b394.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.