Full Screen Overlay inside symbol

I’m trying to figure out how to make this work. I want to have a subscribe button and when you press it a full screen overlay pops up with the subscribe form. This will be on all pages. The issue is as soon as I put it inside the menu symbol it only opens inside that symbol. I can’t trigger it outside the symbol either. There’s no way I have to have my menu not be a symbol and have to edit every page one at a time. There’s gotta be a logical way to do this but I’m stumped. You can see what I’m working on here and the issue

https://the-indigenous-athlete.webflow.io

I just don’t understand why the position absolute won’t work the way it’s supposed as soon as it’s in a symbol. Seems weird


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Can you please post your read-only link so we can investigate this issue further?

HI @Jason_Hebert1 for Modal you should use position fixed and not absolute

Hey Stan! Thanks for that but I already am. It’s like it’s stuck inside the symbol which is bizarre. Worst case I’ll have to rethink this but it feels like this shouldn’t be this hard.

Just double checked it and it is set to fixed. had that maybe I’m a moron moment hahaha. Sadly that wasn’t it

Webflow - The Indigenous Athlete

hi @Jason_Hebert1 you have wrong setting. The Modal should be outside and sitting as eg. standard section. Thats is why is locked inside. Find some tutorials how to create modals or look inside some shared projects with Modals to be able set it correctly. After correct setting Modal works as expected.

The issue is that the menu is a symbol and you can’t trigger an interaction with something outside the symbol. Unless there’s a work around for this. I can get the modals to work fine when they’re separate like you’re saying but that would mean I wouldn’t be able to use a symbol for the menu and that sounds like a nightmare if I ever need to change anything.

hi @Jason_Hebert1 I see that you still didn’t solve it so I have made a simple example when button is in nav symbol and trigger Modal that is outside.

READ ONLY

LIVE DEMO

Hope this will solve your request but feel free to wait and maybe another forum user may give you better solution.

I figured out that the issue is you can’t have any other interactions on the symbol. So you can’t have it slide in on load or anything like that. Really stupid bug.

and this doesn’t always work as expected. You set this up the exact way I did it and I find it works sometimes and sometimes it doesn’t.

hi @Jason_Hebert1 for me it works as expected. :wink: