Navmenu on mobile ruined by enabling page animation (not even triggering it)

My navmenu acts very strange when enabling “page scrolled” as a page trigger.

I was following along with this short tutorial from Webflow: Show and hide navigation bar on scroll - Webflow University Documentation

Just creating a simple interaction, showing and hiding the navbar when the the page is either scrolled up or down.

The problem is, as soon as I enable this interaction my navmenu on mobile ends up looking like this (without even triggering the animation once, this is just the default look):

Whereas this is the desired look, which I get immediately when turning the interaction off.

I don’t understand how translateY can have this effect on a fixed element. Is there something obvious I’m missing? :sweat_smile:

Here is my public share link: LINK

1 Like

hi @Sindre_Skoglund-Hans in your “open-menu” interaction is one extra animation that is hiding background immediately after opening. Just delete it.

1 Like

hi @Stan thanks for replying, but that is just a circle I used to create motion when the menu opens. Not hiding that element results in this:

The main issue persists. Introducing the animation, selecting that translateY is something that should trigger on page scroll, makes my navmenu misaligned. The background disappears completely as well.

What is strange is that even only enabling the scroll up animation (which sets translateY to 0, in other words does nothing) causes this issue.

But as soon as I disable this animation everything works exactly how I want it, except for hiding / showing the menu when scrolling.

To be clear, these two animations are the offenders:

Hello @Sindre_Skoglund-Hans,

It appears that animations are intertwined. Could you please share the read-only version so that I can take a closer look? I’d also like to record a Loom video for you to demonstrate how to fix it. Thank you very much.

Hi @rsacreativestudio , thank you! Here you go: LINK

1 Like

You can set offset higher than 0 in px or % to prevent immediate trigger for your animation. I do not know @rsacreativestudio why “read-only” in initial request doest work for you as I had no issue to open it.

1 Like

Thanks your thoughts @Stan. It’s not any offset issue. He just need to disable desktop animation for lower devices of page load. Read only link is always simple way to resolve issues. Have a nice day. Thank you so much

1 Like

Thank you guys for your inputs. We have some workarounds, but I’m afraid the issue still persists.

1 Like

Sorry @Stan I did’t checked it earlier. Thank you so much for correction as I’m new on community.

You should go back and

  1. remove immediate hiding circle (as I have mentioned)
    2.delete interaction for hiding navbar and create it again (try offset)
1 Like

It seems offset only delays the inevitable. As I mentioned, the circle is not a concern in this situation. The menu is still misaligned, even if I artificially replace the background that is lost because of the animation.

If I can’t find a simple solution to this, I’ll simply go for a fixed header instead of one that hide or show on scroll. I really do appreciate your help though!

hi @Sindre_Skoglund-Hans it is a simple task if you follow instruction I’ve suggested.

But this is what I want:
correct menu

And this is what that solution gives me:
incorrect menu

More than anything I’m curious to find out how translateY or Webflow interactions causes this issue in the first place, as I’d like to avoid similar problems with future projects.

I can’t replicate it.
what I remember from yesterday there was an issue with displaying nav as block instead of flex