Why does my mobile menu change height?

Design help General
1

Hi! My menu changes height or skips/slips up when scrolling downwards in a mobile viewer. On iOS it only happens in portrait mode.

I may have a vague memory of creating an interaction on an old version of the site for this but I can’t find it anywhere and i might be imagining it.

Could it be a native iOS safari thing and would there be a way to work around it?

Kindly,

JJ

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

1 Like
2

Hi JJ,

iOS has specific handling for scroll events that can affect sticky navigation bars. To resolve this issue, here are a few key areas to check:

The most common cause is having parent elements with overflow properties or fixed heights that interfere with sticky positioning. Review your navbar’s parent containers and ensure they don’t have overflow set to hidden, scroll, or auto. Also check that they don’t have fixed height constraints.

For the sticky positioning itself, verify that:

  • The navbar has position: sticky applied
  • The top/bottom distance value is properly set (usually top: 0)
  • There’s enough scrollable content below the navbar for the sticky behavior to activate

If the issue persists, you might want to consider using a fixed position navbar as an alternative solution for iOS devices, which can be implemented using custom CSS targeting iOS devices.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like
3

Not helpful since the nav bar is already in a fixed position with the top property set to 0px.
There is definitely enough scrollable content.

1 Like