Menu icon Foundation
Foundation 5 Sticky Top Bar and WordPress Sticky Posts

By now everyone who uses Foundation 5 and tries to implement the sticky top bar nav menu knows that it is currently (as of v5.0.2) broken. Meaning that on scroll, your nav bar will not automatically stick to the top of the browser window like the documentation says.

The fix, documented in other posts related to this bug, is fixed in the yet-to-be-released v5.0.3 and corrects a type-o in the top bar javascript (see https://github.com/zurb/foundation/issues/3608).

Anyway, if you're using Foundation 5 and WordPress, and plan to use the sticky top bar functionality for your menu, note that the CSS class name WordPress uses for Sticky posts is the same as what Foundation 5 uses (e.g. class="sticky").

So, on your blog page, if you have sticky posts and are using the sticky top bar, when you scroll your sticky posts will jump to where the menu jumps to at the top of the browser window.

I'm still testing and trying to figure out how to get around this but just wanted to share what I noticed yesterday when testing F5 and WP.

Cheers,
Jeff

stickytopbarwordpresssticky notes

By now everyone who uses Foundation 5 and tries to implement the sticky top bar nav menu knows that it is currently (as of v5.0.2) broken. Meaning that on scroll, your nav bar will not automatically stick to the top of the browser window like the documentation says.

The fix, documented in other posts related to this bug, is fixed in the yet-to-be-released v5.0.3 and corrects a type-o in the top bar javascript (see https://github.com/zurb/foundation/issues/3608).

Anyway, if you're using Foundation 5 and WordPress, and plan to use the sticky top bar functionality for your menu, note that the CSS class name WordPress uses for Sticky posts is the same as what Foundation 5 uses (e.g. class="sticky").

So, on your blog page, if you have sticky posts and are using the sticky top bar, when you scroll your sticky posts will jump to where the menu jumps to at the top of the browser window.

I'm still testing and trying to figure out how to get around this but just wanted to share what I noticed yesterday when testing F5 and WP.

Cheers,
Jeff

Rescue Themes about 5 years ago

Because it's not good practice to modify core WordPress functionality, you can also do a search for the following in "foundation.js":

sticky_class:"sticky" 

Then replace the class name with whatever you'd like and use that same class name for your navigation. Obviously the scss method is preferred but for those who aren't using that method, this might be a better alternative than using a WP function.

Artem about 5 years ago

The following function will stop WordPress from using the sticky class, and style WordPress sticky posts using the .wordpress-sticky class instead. Thanks to envex for this one. It’s simpler than modifying Foundation to use a different class.

function remove_sticky_class($classes) {
$classes = array_diff($classes, array("sticky"));
$classes[] = 'wordpress-sticky';
return $classes;
}
add_filter('post_class','remove_sticky_class');

Steve Trask over 5 years ago

Hi Jeff,

Thanks for the heads up on the bug, the scss _settings file you can change the name of the top bar sticky class as below line 994

$topbar-sticky-class: ".sticky";

Hope this helps

Steve