Menu icon Foundation
Repeatable bug in Top Bar sticky code

Hey good folks of foundation forum. I've come across a repeatable bug with Top Bar and it's sticky behaviour.

If you take the same code used in the documentation. I've set up a code pen demonstrating the issue.

http://cdpn.io/reBCz

The code is a direct copy, with a div added as described when wanting to make the Top Bar sticky. The codepen also uses the same one Zurb suggest and link too from here:

http://foundation.zurb.com/docs/index.html

The sticky behaviour works, until you start to use the data-options:

When applied - Works 100% as expected. If you refresh the code pen on a large width, it sticks. If you refresh the browser on medium or small - the navigation no longer sticks.

This is exactly right.

Now change sticky_on: large to sticky_on: small

Go to a large size, and refresh - The Top Bar is STILL sticky. It should no longer be sticky. It should only be sticky at Small Sizes after a refresh.

The same behaviour applies to medium data option, so both small and medium don't work as required.

The expected behaviour should be that when set to small - ONLY small is sticky - all other sizes remain normal. And the same applies to medium.

Only large works as expected, with both small and medium losing their sticky nature, as required.

Hopefully this is straight forward to fix.

I came across this along the way:

https://github.com/zurb/foundation/issues/4642

And in that thread, dGs demonstrates the small sticky working as intended. Indeed this works for me - but the different is, he's using an older version of foundation on the code pen.

Changing my original pen's css to source from dGs's:

http://dl.dropboxusercontent.com/u/9629550/mif/codepen/foundation.min.css

Allows the small to work as intended.

Clearly this is something that has crept in somewhere.

Any help resolving this, much appreciated!

top barstickybugsmall

Hey good folks of foundation forum. I've come across a repeatable bug with Top Bar and it's sticky behaviour.

If you take the same code used in the documentation. I've set up a code pen demonstrating the issue.

http://cdpn.io/reBCz

The code is a direct copy, with a div added as described when wanting to make the Top Bar sticky. The codepen also uses the same one Zurb suggest and link too from here:

http://foundation.zurb.com/docs/index.html

The sticky behaviour works, until you start to use the data-options:

When applied - Works 100% as expected. If you refresh the code pen on a large width, it sticks. If you refresh the browser on medium or small - the navigation no longer sticks.

This is exactly right.

Now change sticky_on: large to sticky_on: small

Go to a large size, and refresh - The Top Bar is STILL sticky. It should no longer be sticky. It should only be sticky at Small Sizes after a refresh.

The same behaviour applies to medium data option, so both small and medium don't work as required.

The expected behaviour should be that when set to small - ONLY small is sticky - all other sizes remain normal. And the same applies to medium.

Only large works as expected, with both small and medium losing their sticky nature, as required.

Hopefully this is straight forward to fix.

I came across this along the way:

https://github.com/zurb/foundation/issues/4642

And in that thread, dGs demonstrates the small sticky working as intended. Indeed this works for me - but the different is, he's using an older version of foundation on the code pen.

Changing my original pen's css to source from dGs's:

http://dl.dropboxusercontent.com/u/9629550/mif/codepen/foundation.min.css

Allows the small to work as intended.

Clearly this is something that has crept in somewhere.

Any help resolving this, much appreciated!

Devon Bellizio almost 5 years ago

I'm having the same issue and have been able to resolve it using the 5.2.0 version css as well. However, I need to customize the foundation grid for my application and therefore limited to using the latest release (5.2.3 as of today).

I've checked the .fixed class in both versions and didn't see any differences there. Next guess is that something differs for the .top-bar code, but that's a lot to dissect and just copying from 5.2.0 doesn't seem like a good move.

Any ideas?