Streaming live at 10am (PST)

Interactions Not Being Disabled when Element is Hidden


#1

Hey all,

I have an interaction applied to two elements that are meant to work on the menu for the desktop and tablet versions only and I have hidden them in both mobile versions. Yet, I still seem to have the menu dropping down into place on mobile.

https://preview.webflow.com/preview/bjc-test?preview=90420c08ac699a47c6b2bfe2d40bb749

The two interactions are on "Scroll 01 Desktop" and "Scroll 02 iPad."

I assume it's a mistake somewhere on my end, but maybe not as I think I've examined every element to make sure there isn't a rouge interaction tagged to one somewhere.

Any input would be awesome,

Thanks!

-Daniel


Best practices for removing interactions for mobile
#3

Hello,

When in the Tablet view you'll see the header shrinks or expands as I scroll down into the page and then back up.

On the iphone it should look like this:

But does this:

I have the "scroll 02 ipad" element on which I applied the interaction as active for the Tablet view:

But Inactive for the Mobile view:

When I delete the interactions the problem goes away, so I'm pretty certain the issue is in there.

I'm also just diving into interactions so it's entirely possible I'm going about this in a less than streamlined way.

Thanks!


#4

Hi there, from what I can tell, the Scroll 01 Desktop is set to show on all views, I would change that to show on Deskop only.

The Scroll 02 Ipad class, I would set the visibility to show on tablet only:

One more thing, on the Scroll 02 Ipad interaction, I would change the height that the navbar resizes to, from 67px and set that to auto.

Try those things and let me know how it goes.


#5

Great response as always! I thought the "eye" on and off was enough to disable, but your pointing out the additional visibility tool makes perfect sense (even better sense!).

Thanks!


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.