Modal Menu Flashing on Page Load

Hello, I am working on my first Webflow site. I am using Interactions 2.0 to create a modal menu that slides in and out on click (for all screens). I have the menu set to an initial state of 0% opacity and a negative pixel move. I think I have set something up incorrectly though. The menu is flashing on page load. How should I go about fixing this? I tried setting an initial state on page load in interactions, but that didn’t change anything. I’ve tested the issue in Firefox and Chrome. URL for public site is: katieschwarzdesign.webflow.io


Here is my public share link: https://preview.webflow.com/preview/katieschwarzdesign?preview=6dc63f15ca0089d5d31fcf0d33f3066d
(how to access public share link)

I’d suggest trying one of two things or both. First I’d change the display setting to hidden that way your menu will be gone not overlaying your content. But you will probably need to update your onclick interaction so that the state changes to block or flex on the hamburger button click.

I’d also change the opacity of the item overlay to 0 for the initial element state.

01%20PM

Hope that helps.

Thanks! The opacity did the trick. I am not sure why it didn’t occur to me to set the initial state in the style panel and not just in the interactions.

1 Like

It happens. Sometimes it just takes a second set of eyes.

1 Like