Buttons and links not working after full-page navigation interaction

Hello :slight_smile:

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 :sweat_smile:

Here’s my read-only link : https://preview.webflow.com/preview/bonaindiaxd?utm_medium=preview_link&utm_source=designer&utm_content=bonaindiaxd&preview=2283fde753c0ea682c9ae3d1cd00a03d&mode=preview

Thanks so much,
Benji

Here is my public share link: LINK
(how to access public share link)

1 Like

I’m having the exact same issue.

I’m not sure if this is just a webflow designer issue and the buttons will work once the site is published or it is a bug that needs fixing.

Hey Max, I’m glad I’m not the only one then and hopefully your comment will help boost this post to a greater priority.

I’ve been able to get work done on other areas of my site but still stuck on this issue 8 days later…!

Fingers crossed to get this sorted out soon, I’ll also update here if I figure something out.

1 Like

Fingers crossed Benji!

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.

Cheers!
Max

Hey Max, check this out : Full Screen Menu Navigation - Webflow

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.

Saw your last post so just thought I’d share :slight_smile:

1 Like

Nice one, Benji! I’ll give it a go and let you know how I get on

I’ve no idea how I’ve done it, but it’s fixed lol

I think it has something to do with the way the items are fixed in their positions

There’s some images attached of each of the settings though. I hope this helps!

Hey Max, thanks for your reply, I was able to figure it out on my end too :slight_smile: Happy Webflowing and good luck to you !!!

Hi Bonaidia! What was your fix? I seem to be having this problem and after a day of serious frustration im still very lost!

Any help youl be really appreciated!

Here is my site.

https://preview.webflow.com/preview/the-round-ead73a?utm_medium=preview_link&utm_source=designer&utm_content=the-round-ead73a&preview=5a8789fc70713cd0a129d1f857e3eeeb&mode=preview

Hey Robin ! Happy Monday :wink:

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.

Let me know.

Cheers,
Benji

Hay Benji!

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.

Robin

So, I think I’ve got it working.

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.

Like this :

Can you see that image ?

Let me know if this works for you :crossed_fingers:

Benji you are a legend my friend! Thanks so much :partying_face:

:raised_hands: :fist_right: :fist_left: :clap:

Hello hello,

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

Any advice is super welcome.

https://preview.webflow.com/preview/bobr-75c0d1949acffc9f1044-a1879d2d1adb1?utm_medium=preview_link&utm_source=dashboard&utm_content=bobr-75c0d1949acffc9f1044-a1879d2d1adb1&preview=43742b29fc99eff1c1f6c687006ebdc4&workflow=preview