Sticky Navigation doesn't work on mobile browsers

I’m putting together a website that uses the Nav. Bar block set to be sticky. It works great on a desktop browser, regardless of the width of the window. However, on mobile browsers (I’ve checked in Safari, Chrome, Firefox, and Opera on an iPhone) the sticky part doesn’t work. I’ve checked the Live Preview of the Navigator theme and it works fine, so I know it’s possible. I haven’t been able to figure out what the difference is between the two.

Is this a bug, or am I missing something?

1 Like

Hi @jclark!

I’ve not run into any problems with the sticky setting in the Navigation Bar not working on mobile browsers. That being said, perhaps there’s something amiss with your setup, project file, or maybe you’ve found a bug. That being said I have no way to know or troubleshoot it without a few things. If you can help me by providing these things I can look into it:

(1) A link to the live site, specifically the page that has the problem.
(2) A ZIP file containing your project file. If you’re using any 3rd-party stacks or the like on the page I will need those as well to test compatibilities. If you’re sending just a project file you can post a Dropbox link to it here. If you have more than that in the ZIP file, please email it to me, referencing this post. You can send the email to adam at elixirgraphics dot com.
(3) And finally, let me know what version of the following things you’re using: RapidWeaver, Stacks, Foundry, Foundry theme.

Hi,

I am having this same issue and have managed to demonstrate this on the Foundry home page (http://foundry.elixirgraphics.com/). Using the latest Chrome ios browser on my iPad Air 2 (or whatever the last pre-pro model was called). Don’t use Safari for the test as it’s too difficult to manipulate for the second part of the test. The issue is apparent on my iPhone 5S as well (ios 10.1.1)

On an iPad, scroll up by just doing a quick swipe and the menu does not stick. If it does then I guess there is no point in continuing the test and something really odd is happening. If it doesn’t stick, reposition to the top again and scroll up a few millimetres - just enough to obscure part of the Chrome tabs, lift your finger and chrome will reposition the tabs. Then scroll normally and the menu sticks. I see the same affect on my own site.

I have also found that having an alert above the navigation forces it to stick. It also appears to be the case that if the nav. bar is below a banner it sticks ok.

My own site, which I’m reworking is

http://www.hundewagen.id.au/test100333

There are some 3rd pary stacks but not on every page.

All software is current RW(Version 7.1.7 (18375))/Stacks(3.2.6)/Foundary(1.2.0.0 theme 1.0.1)/Mac OS(10.12.1)/ios(10.1.1) browsers etc. I have not tested this on an android device as I don’t have access to one. If you need a copy of the project let me know and I’ll create a simple test case.

But it all works fine on the desktop.

If you can’t reproduce the issue on the Foundry page let me know and I’ll keep testing here. In the mean time I’ll probably move the nav. bar to the bottom of the banner before I publish.

Apart from this one issue I have not had any real problems and enjoy using Foundry.

cheers

Greg

I’ve been really busy recently, so I haven’t gotten around to responding yet. However, it does look like it’s not just me. The banner on http://foundry.elixirgraphics.com isn’t sticky at all for me on any mobile broswer.

My work in progress site is www.creatorforge.com/testing. I use some third party stacks, particularly on the home page, but the other two (About and Podcast) I don’t think use anything by Foundry, and “Load Faster” from Cos Culture, but this problem predates adding that stack to the page.

I’ll try to remember to email a project file tonight when I get home.

Thanks for the examples guys! I think I’ve narrowed in on the problem. I’ll look at it and see what I can’t do to make it work. Once I get something cooked up I’ll likely hit one or two of you up to give it a test before I push it out live to everyone.

1 Like

Sounds good, thanks for the quick response!

Thanks, Adam, for the quick response and result.