Relume Community Icon

Relume Community

Issue with Modal 1 Component: Navigation Links Unresponsive After Close | Relume Community

Issue with Modal 1 Component: Navigation Links Unresponsive After Close

·

·

Hey, everyone. I’m having an issue with the Modal 1 component and was hoping someone could help me figure it out. I added the Modal 1 component to the site and styled it as usual. I noticed that when the modal opened up, the top part would be under the NavBar, so I added a Z-index of 999 to the modal to ensure the top part does not get hidden by the NavBar. Also, I did not want the modal triggered by the button, so I removed that part and instead used the Page Load interaction to trigger the modal to open a few seconds after the site loads. Everything looks fine and the opening and closing of the modal work great, except that after the modal is closed, primarily from the tablet breakpoint and lower, the burger menu and the links in the footer are “unclickable”. This means that after the modal is closed, you can’t click on any of the navigation links to visit other pages. Has anyone experienced something similar, or know if I messed something up with the changes I made? Here is my Webflow read-only link: https://preview.webflow.com/preview/nj-elc?utm_medium=preview_link&utm_source=designer[…]0bad12713141ba7bd5bd7b666402bc00&locale=en&workflow=preview

23 comments

Matt J.
·
·
Lou S. would you mind sharing the published URL?
Lou S.
·
·
Hey Matt J., yeah, of course. I don’t know why I didn’t think of doing that from the get-go. The published URL is https://nj-elc.webflow.io/
Matt J.
·
·
Lou S. yeah feels like the overlay is not going away but after looking at your interactions - it definitely should be. Everything looks to be setup the way I would expect. Also noticed that everything is clickable if I click the overlay versus if I click the X - if I click the X - nothing is clickable until I've clicked the anywhere....
Matt J.
·
·
Lou S. this might be a long shot but rather than setting the z-index of the component div, I wonder if we should use Finsweet Smart Lightbox - which might also help with the closing of this modal? https://finsweet.com/attributes/smart-lightbox
Matt J.
·
·
oh wait
Matt J.
·
·
yeah no lol
Matt J.
·
·
I can't think of any other workarounds or fixes for this right now
Lou S.
·
·
The overlay blocking things makes a lot of sense. I’ll reset the Modal component to the original z-index, and check out the smart lightbox feature.
Lou S.
·
·
I appreciate you taking the time to check and give me feedback. I thought I was going crazy, so it is helpful to know I wasn’t missing something silly.
John S.
·
·
Hey Matt J. i have a similar issue with a button modal interacting with a navbar. Could this be a bug between the two components interactions? For me, on tablet and smaller I have (only) a dropdown menu list appear over a contact modal even though the model z is 99. That plus when the button is clicked it triggers the nav to close rather than the modal to popup. (read only link if you want to take a closer look)
Matt J.
·
·
John S. naw different issue - its because you have the contact modal nested inside of the navbar menu wrapper - I would put that outside of there - maybe even below the footer, and then all should be good.
John S.
·
·
Matt J. like keep the button in menu but pull the modal-compontent itself out? Let me know if I'm understanding that correctly. cause does that change the structure on every page?
Matt J.
·
·
yep correct
Matt J.
·
·
or pull it out of the navbar menu at least
Matt J.
·
·
yeah if you want it on every page, add it to the footer component
Matt J.
·
·
or put it here
Matt J.
·
·
also looks like the close button lost its close interactions - look at the overlay for what interactions to assign
John S.
·
·
Gotcha! Ill give this a try and report back! Yeah I like the directness of a contact popup right in the nav for people who are quick to connect. Ultimate goals is to eventually set up a multi-step form in that pop up
Matt J.
·
·
yeah for sure - yeah the modal component doesn't have to be right next to the button for it to work though - can be anywhere on the page really.
Lou S.
·
·
By the way, I think there is some sort of issue with the modal and its interactions with the background overlay. I resolved my issue by removing the background overlay. No matter what I did or how I made the overlay disappear after clicking the close button, it would continue to block all the links. But once I deleted the overlay, everything worked like a charm.
Matt J.
·
·
Hmm if there was an issue with it, would be something with Webflow. I looked at it and it looked fine to me, will continue to do some testing on it though. Appreciate the update on that!
👍1
John S.
·
·
Interesting, Matt your solution worked great! Got it properly set up now and will test across other pages! But I did give the overlay removal a try like Lou suggested and my desktop interaction broke. Undid that but noting it if there is any discrepancies that help with your testing!
Matt J.
·
·
got it - good to hear John thanks for the update
💯1
🙌🏼1