Foundation-sites: Mobile menu not working with sticky header on mobile devices

[telliott1]

There seems to be a bug when you use both the mobile menu and sticky header together. The header is only sticky on large screens and above as I'm using the data options attribute. I've tested the mobile menu without using the sticky header and it works fine.

You can reproduce this bug by clicking on the menu icon, scrolling down the page, scrolling back to the top and then by closing the menu. There is now a large white space where the menu was open. If you now scroll again the container jumps back to where it should be.

[brettsmason]

@telliott1 Could you setup a CodePen to show what the issue is please?

[telliott1]

@brettsmason Would it be ok to provide you with the url of the site instead?

[brettsmason]

@telliott1 Yes that's fine, just we need more of an idea of what you are trying to do/what's going to help.

[telliott1]

@brettsmason http://www.digital-dev.co.uk/on-site-recruitment

[brettsmason]

@telliott1 So I can't see an obvious problem whilst looking at the site.
Could you try and explain the problem a bit more. Is the on the large view or small/mobile view? Is this only when using sticky on the menu when setting the data attribute to small?

[telliott1]

@brettsmason Were you viewing the site on a mobile?

[shoaibik]

I checked it on real phone and also on Chrome device mode, i could not reproduce the issue.

[telliott1]

@shoaibik How strange. I've checked it on multiple devices and I can reproduce the issue. I've attached some screenshots showing the problem.

[brettsmason]

@telliott1 OK I've managed to replicate the problem on my phone now. Could you confirm if you have tried removing the sticky element completely so we know its definitely this that's the problem?

Also 6.2.2-rc1 was released yesterday which had a lot of sticky specific bug fixes included. It would be worth you trying it out and seeing if this solves it.

[shoaibik]

I think I found the issue, the sticky plugin sets the height of .sticky-container, which it might not calculate correctly when menu is closed.

A quick work around is to set its height to auto on small screen.

.sticky-container {
    height: auto !important;
} 

[telliott1]

@brettsmason As per my original post, I've tested the mobile menu without using the sticky header and it works fine. That's useful to know thank you.

@shoaibik That worked but I had to override .sticky from absolute positioning to static positioning for your code to work. Thanks.

[alistairquinn]

I've got the same issue with Foundation 6.2.4 on WordPress 5.6.1. The sticky container works as it should on desktop but not on mobile. Please see https://www.turnerandlast.com. Any help would be gratefully received.

[brettsmason]

@alistairquinn From a quick look it looks like you need to set when the container is sticky.
You need to add data-sticky-on="small" orstickyOn: smallto yourdata-options`. This defaults to medium: http://foundation.zurb.com/sites/docs/sticky.html#js-options

[alistairquinn]

Ah! Thanks. It works perfectly!

[JeremyEnglert]

This appears to have been resolved.