I’m having trouble figuring out why an interaction on a project I’m building isn’t working properly.
Basically, all buttons/hover states work fine on my site, but when I open/close the full-page menu, a layer that I can’t identify seems to be covering the page, making the buttons/links inaccessible…
I’ve created a rather complicated interaction for the menu opening/closing, but I’ve double and triple checked it and everything that I triggered with the first click seems to have been accounted for and counter-balanced on the second click…
Hoping that description makes sense, would anyone have any ideas for how to fix this? I’d really appreciate the help as I’ve been stuck on this one for a little while now
I’ve found this Honda history website that has been created in webflow and they have similar animations of menu overlays covering interactive elements. The buttons and hover interactions seem to work once the covering menu has been minimised though.
Likewise! I’ve moved on to getting the other sections sorted on my site and will circle back to this issue.
This guy created two different elements, 1 for the nav menu itself and another for the full screen menu.
I think the problem might be an issue with z-index (components with different z-index within the same element), but splitting the interaction up between two elements might do the trick.
Haven’t gotten a chance to try this yet because I’m stuck on other things ATM… lol, but will give it a shot eventually.
First of all, what an awesome website… I really love it, very creative and so cool how it reflects the theme - major props…!!!
As for the issue you’re having with the menu, it looks like you’ve figured it out now ? The only issue I see is that the “menu open” state is still in the default grey.
Thank you, and also for replying so fast!
Nah I cant seem to figure it out. I have just hidden it for now and moved on… So If you open the slider menu the buttons on the pages stop working once its been closed.
I really appreciate any help, this ones really got me scratching my head.
First thing I changed was the z-index - the “Navigation” element/symbol is at 9999 and the “menu” overlay is at 8888 - this just to make sure they always cover other elements on the page.
After that, I changed the Navigation open settings to “Menu type” = open over right.
I am struggling with the same thing, but cannot get it to work. I either get the full screen menu overlay but then the menu icon disappears. Or I can still see the menu icon but then it covers the full screen menu overlay. I tried these z-index values but cannot get them to work