Streaming live at 10am (PST)

"Nav Appears As You ScrollNext" isn't working on tablet/mobile


#1

Hi,
I used this tutorial:
http://tutorials.webflow.com/nav-appears-on-scroll
and built a bar that has a call to action button.
it is functioning correct on desktop size but not on mobile/tablet.

what am i missing?

https://webflow.com/design/inbi-makeup-artist?preview=0091520ef70fae41b1e3c2f56b9140e9

http://inbi-makeup-artist.webflow.com/


#2

Ok, I found several things and think you should start again from scratch.

First of, the revealing interaction is set on both the hero and top bar.

You should remove your reveal interaction and the masking top bar interaction (your two last interactions). Then start fresh.

On the top bar : create an interaction that makes the top bar goes UP and display NONE, ONLOAD. That must make the bar disappear and place itself out of the page when loading.

On the hero, set an interaction, OnScroll, affect different element: Top Bar, and set the Scroll out of view to display bloack and slide down.

This should work.

Also, extend the position:fixed of the top bar to other devices so ther's no gap on the top of the page.


#3

ok so i fixed the issue and it works now just fine, nut not on my iPhone.
is scrolling om touch devices different? the topper doesn't appear when scrolling below the header.


#4

Oh... for a pile of issues regarding touch navigation that haven't been solved, I think the Scrolling trigger have been deactivated by Webflow for all mobile devices... They've said that many time here. After having answered you I was almost going to tell you that scrolling animations for mobile weren't a good idea anyway... it brings too much trouble.

Sorry should have thought abt that earlier. Anyway, a cleanup of your animation structure was needed right? wink


#5

Actually no, but you made me fix it anyway smile thanks


#6

#7