[RESOLVED] Z-Index issue stops interaction with other elements!

1

I have a drop-down navigation bar that stop interaction with anything under it.
LIVE PREVIEW.

When the drop down is closed, all of it is set to hidden. The group height is also about 80px and overflow is hidden, so it shouldn’t be on top of anything else. On mouse over, the drop down is visible and the group height becomes its original.

I was thinking that a solution might be to set the nav-hype-document div z-index to 1, set the button z-index to 2, and the drop-down menu to 3. I couldn’t figure out how to do this in hype.

I have spent days trying to figure this out to no avail, please help!

I have included a zip with all hype documents and html files.
Thanks!

nav issue.zip (226.3 KB)

2

SOLUTION:

I created two javascript functions that changes the scene and document size.
Set scene height to 85px, and run the first JS to increase height to 650px on navbar mouseover.
Run the second javascript file on navbar mouse our and set height back to 85px after 0.5 seconds.

hypeDocument.currentSceneElement = function(){
return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
}

positioning();
function positioning(){
var height = 650;


var scene = hypeDocument.currentSceneElement();
scene.style.height  = height + 'px';
document.getElementById(hypeDocument.documentId()).style.height = height + 'px';
}

Hope this helps someone in the future.

P.s. you must set the document position to absolute.
Code inspirate via @h_classen

4 Likes