Streaming live at 10am (PST)

Bottom-bar doesn't work on mobile

Hello, I’m trying to create an interaction that takes the navbar from the top of the website to the bottom of the website.

The navbar has a height of 10vh and the interaction is just moving it 90vh to the bottom (following the math I should see exactly the entire navbar at the bottom doing this).

The problem is that it works perfectly on desktop but on mobile it doesn’t. I did a quick research and figured out that the problem is related to the top/bottom bars from the mobile browsers. So I just inserted the custom code from this thread:

And even doing this, it’s not working on mobile. The navbar still going off the viewport.

To check this on my read-only link you just need to tap ‘Click here’.
You need to try it on your cellphone to experience this error, since simulating a mobile device on your desktop browser, mysteriously works.

Real-example of what I’m trying to achieve:
https://showcase.commercialclassics.com/ (click on ‘About’ link at the top and you will see the interaction)

Thanks.


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

Does anyone have any idea about solving this problem?
I didn’t find a way yet.