Navbar show on scroll on Mobile devices

Hello all.

@danro @thesergie

With the interactions it’s easy to create a “show navbar on scroll”. This works in no time on desktop, but because the Scroll setting doesn’t work in most mobile devices the navbar will never show! Actually currently I have the following workaround, but it’s not really clean:

So a simple method would be to have the navbar for desktop just like it is, but set display none on all mobile devices. Than copy paste the same navbar on tablet (and down), and set display none for desktop. And in this navbar disable the interaction effect. It works, but it’s not clean. Any advice? thanks

Thanks @rowan. Currently, we disable the scroll trigger on iOS devices. This means that we also ignore the Initial Appearance on the entire Interaction as well (but only on iOS). That way, the element should not be hidden unless you hid it using a manual display style.

I think we should perhaps look at integrating the IX system with our breakpoints. Although breakpoints are not a guarantee that a user is on a mobile device, they at least gives us more control over screen sizes + IX.

1 Like

I would really like the scroll into view interaction to be available on mobile too. I had the same thought of that workaround but I thought I’d ask before I go and add yet another navbar to every page of my site.

1 Like

Can you please give us the ability to show the navbar on scroll on iOS?

Also you mention that you ignore the initial appearance on the entire interaction for iOS but for some reason my nav bar is still hidden on iOS devices.

1 Like

@bryantay, do you have a public preview link to your site with the nav bar still hidden on iOS devices? We on the forum can look to see why that is happening, and possibly provide a solution for you.

Thanks! Sure, here it is… early WIP. Working on getting the nav and scrolls to behave… There are 2 issues I can’t seem to get worked out.

https://webflow.com/design/dayone?preview=75d940b98d535d32ac30485b510047b3

  1. I can’t get the nav to appear on iOS.

  2. On desktop browsers, if you click on “work” the nav slides in as it should. But then click on “about” to scroll down to the about section. Now click “work” again. When the page scrolls back up to the work section the nav slides up and out. The nav should stay until you click on “home” again.

Thanks for any suggestions!

BTW, All copy is placeholder for now so don’t judge :smile:

If anyone has any thoughts, it would be much apreciated.

Hi, @bryantay try this out, see if it solves the issue:

Set hero section to none for interactions

Set logo to use display nav interaction:

Save and try again, and see if it works for you … Cheers

Thank @cyberdave that fixed the issue with the nav bar sliding up incorrectly.

Do you have any thoughts on issue #1… why the my nav bar will not show on iOS devices? I read in another post that Webflow ignores the scroll appearance interactions on iOS devices. So on Mobile rather then the nav initially sliding up and out of sight, it should just show on mobile right?

Thanks for the help!

1 Like

I finally figured out why the nav was not showing on iOS devices (in case anyone happens upon the same issue)

I initially followed this tutorial to make the Nav appear on scroll. (http://tutorials.webflow.com/nav-appears-on-scroll)
The problem is in the tutorial the first step is to add a Display None interaction to the nav bar. That interaction is not ignored on iOS devices so the nav bar was always set to display none even though the other scroll interactions set on the hero section are being ignored. I removed the interaction on the nav and everything seems to now be working as expected on iOS devices.

I’m upping this one…

Has this been curated or has it been addressed a rock solid workaround?
Most of my clients are checking their site on iPad.

It’s a big concern for them.

Hi everyone, sorry for the delayed response.

Unfortunately, we are unable to support scroll triggers on iOS at this time. We tried several workarounds, but Apple simply does not provide developers with the necessary event hooks to give us a reasonable UX with scroll triggers.

Here is a screenshot directly from their Developer Library, showing this limitation. Until Apple changes this in future versions of iOS, our hands are tied.

1 Like