Full screen nav not working properly on mobile browsers

Design help General
1

Hi all,

I’m experiecing problems with my site’s nav menu that I can’t fix.

My site has a full screen nav menu which slides into and out of view when a hamburger icon is pressed. The nav menu has a height of 100vh and a Fixed position with position top set to -100%, which moves 100% down when the hamburger icon is pressed, revealing the menu. This works perfectly on desktop and even on preview in Webflow for mobile-size displays, but on my actual iPhone, in either Safari or Chrome, the nav menu is not completely out of view when the site loads (the bottom 20% or so is visible), and when the hamburger icon is pressed, the menu slides down so that the bottom part of it is out of view entirely!

What’s even weirder is that everything works perfectly in mobile Safari/Chrome as long as the UI components are moved out of the way before pressing the hamburger icon.

All of this behavior is demonstrated in this screen recording.

Please help if you can!

EDIT: Fixed screen recording link.

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

2

Hello @oscabriel, welcome to the community!

The problem might involve 100vh on mobile. It doesn’t really work as one would hope, since viewport calculations on mobile can get tricky with the browser interface.

I personally haven’t tried this, but this might point you in the right direction.

3

Thank you for replying! How would I implement a solution like that in Webflow, though?

4

Also, I tried instead setting the height unit for the nav menu to 100%, which seems to have fixed the problem for mobile browsers. But are there any possible further problems associated w/ doing it that way versus using the vh unit?

5

Yeah that should work fine, since you have set it to fixed position.

I can’t think of any problems doing it that way. Probably better in the end, and simpler.