Interaction Bug -- After roll over, no links can be made on site

Design help Animations & Interactions
1

Hi Webflow Community,

I have a fixed div at the top of the home page which acts as a roll over trigger when users move their mouse over (trying to present CTA before user leaves site). The interaction initially works as intended, however, if triggered again (no action) the navigation links or site links cannot be clicked.

To reproduce:

  1. Go to site (desktop) and roll mouse over the top 10 px of site
  2. CTA Modal Opens
  3. Close modal
  4. Hover over navigation link / dropdown - opens as expected
  5. Roll mouse over 10 px of site again
    Issue: Links / Nav dropdown no longer working

Much appreciate the help!

Here is my public share link: https://preview.webflow.com/preview/align-wealth?utm_medium=preview_link&utm_source=dashboard&utm_content=align-wealth&preview=20214a47912ecad8d6021a5a678f66f8&mode=preview

2

Before you hide the modal you’re setting the opacity to zero, but when you trigger it all your doing is changing the display property. When you hover over the trigger a second time it’s setting display: flex with opacity: 0 and preventing any interaction on the elements below it.

To allow it to trigger each time, just change the initial interaction to also set the opacity to 100 (and the duration to zero to prevent the fade animation):

image

Personally I’d recommend just hiding the Rollover Trigger element after closing the modal the first time so users don’t continue seeing the incentive—in which case you can omit the change to the Open Modal interaction.

2 Likes
3

Mike! Thank you for explaining the issue. That all makes sense now. Agreed, was only looking to have the CTA modal open once for the user, so I’ve added the Rollover Trigger to hide on the Close Modal interaction. Thank you again!

1 Like
4

Glad I could help out! Great looking site by the way :+1: