Menu icon Foundation
Foundation 6.2 Sticky Problems

Okay, my problem: Since Foundation 6 has released, I started a new project for my website (and started to look into Sass, Gulp, Node, Bower). I added a layer and a navigation topbar, as well as some text to test out the sticky feature. After tackling the whole thing for a while, I finally get it to work.
Now, Foundation 6.2 released. I upgraded by following the Upgrade-Guide and also manually upgraded the new gulp stuff. Typed "foundation watch", everything looked okay, except that my topbar doesn't stick anymore, after reaching the data-top-anchor. My first thoughts were, that something in F6.2 changed. I opened the documentation, but everything was still the same.

Then I thought, it might be a problem with a JS-Component. Opened up Firefox Web-Developer Bar and looked through the JS-Console. Got an error "TypeError: root is undefined - app.js:1591:460".
I looked it up, and it seems like something from What-Input JS. To test, if JS is still executed, I added a console.log("test"); in my app.js. Nothing executes, as I expected. Removing the first lines from WhatInput (look below), fixed everything.

;(function(root, factory) {
//  if (typeof define === 'function' && define.amd) {
//    define([], function() {
//      return (factory());
//    });
//  } else if (typeof exports === 'object') {
//    module.exports = factory();
//  } else {
//    root.whatInput = factory();
//  }
} (this, function() {
  'use strict';

I uncommented it again and updated WhatInput to V2 manually, but still the same error, so I reverted back to V1.1.4.

In case it matters, here's my navigation-topbar (I'm using magellan, but it shouldn't matter. Actually, it doesn't matter, even if I remove magellan):

<nav id="main-nav" class="top-bar" data-sticky-container>
    <div data-sticky data-margin-bottom="0" data-margin-top="0" data-top-anchor="main-nav" data-btm-anchor="main:bottom" style="width: 100%;">
        <ul class="menu text-center" data-magellan>
            <li><a href="#about">Nav Point 1</a></li>
            <li><a href="#test">Nav Point 2</a></li>
            <li><a href="#">Nav Point 3</a></li>
            <li><a href="#">Nav Point 4</a></li>
        </ul>
    </div>
</nav>

            

         

Hope anybody could help me, since I'm started to use Gulp, Bower and Node with using Foundation and it seems I'm not as good as I hoped to be.

Foundation 6.2Sticky NavigationproblemWhatInputupgrade

Okay, my problem: Since Foundation 6 has released, I started a new project for my website (and started to look into Sass, Gulp, Node, Bower). I added a layer and a navigation topbar, as well as some text to test out the sticky feature. After tackling the whole thing for a while, I finally get it to work.
Now, Foundation 6.2 released. I upgraded by following the Upgrade-Guide and also manually upgraded the new gulp stuff. Typed "foundation watch", everything looked okay, except that my topbar doesn't stick anymore, after reaching the data-top-anchor. My first thoughts were, that something in F6.2 changed. I opened the documentation, but everything was still the same.

Then I thought, it might be a problem with a JS-Component. Opened up Firefox Web-Developer Bar and looked through the JS-Console. Got an error "TypeError: root is undefined - app.js:1591:460".
I looked it up, and it seems like something from What-Input JS. To test, if JS is still executed, I added a console.log("test"); in my app.js. Nothing executes, as I expected. Removing the first lines from WhatInput (look below), fixed everything.

;(function(root, factory) {
//  if (typeof define === 'function' && define.amd) {
//    define([], function() {
//      return (factory());
//    });
//  } else if (typeof exports === 'object') {
//    module.exports = factory();
//  } else {
//    root.whatInput = factory();
//  }
} (this, function() {
  'use strict';

I uncommented it again and updated WhatInput to V2 manually, but still the same error, so I reverted back to V1.1.4.

In case it matters, here's my navigation-topbar (I'm using magellan, but it shouldn't matter. Actually, it doesn't matter, even if I remove magellan):

<nav id="main-nav" class="top-bar" data-sticky-container>
    <div data-sticky data-margin-bottom="0" data-margin-top="0" data-top-anchor="main-nav" data-btm-anchor="main:bottom" style="width: 100%;">
        <ul class="menu text-center" data-magellan>
            <li><a href="#about">Nav Point 1</a></li>
            <li><a href="#test">Nav Point 2</a></li>
            <li><a href="#">Nav Point 3</a></li>
            <li><a href="#">Nav Point 4</a></li>
        </ul>
    </div>
</nav>

            

         

Hope anybody could help me, since I'm started to use Gulp, Bower and Node with using Foundation and it seems I'm not as good as I hoped to be.

Robbert Stapel over 3 years ago

I think its your markup, the basics of a sticky menu are:

<div id="main-nav" class="top-bar" data-sticky-container>
   <nav class="sticky" data-sticky data-options="marginTop:0;">
      <ul class="menu text-center" data-magellan>
        <li><a href="#about">Nav Point 1</a></li>
        <li><a href="#test">Nav Point 2</a></li>
        <li><a href="#">Nav Point 3</a></li>
        <li><a href="#">Nav Point 4</a></li>
      </ul>
   </nav>
</div>

This should also work with magellan!

Hope this helps
- Robbert

Kevin Gerz over 3 years ago

Actually, no it doesn't work with changing the markup (tested it). The error is still the same "TypeError: root is undefined..".

I also changed data-margin-top and data-margin-btm back to data-options, because it's more convenient.
Also, i don't think it's caused by my markup, since nav and div are actually (sementic) containers, which shouldn't matter, if using the data-*-elements the right way.

That's why I'm confused. It should work. And in Foundation 6.0.2 it actually WORKED. I still believe it's because of WhatInput, but I still have no idea what to to about it. Or maybe it's a thing, when compressing the files/plugins (I use foundation-zurb-templates gulp files)? I have no real clue..

But thanks for the reply so far. :)

Robbert Stapel over 3 years ago

Did you also try to fix your problem on a new project? Just by starting a new project and only put in the code you need for the sticky top-bar, i found that sometimes my other code is messing things up...

I also found this on npmjs:
What Input v2.0.0 no longer supports UMD module loading (e.g., var WhatInput = require('what-input')). You can still require What Input without assigning a variable (e.g., require('what-input')).

Cant realy tell what that should mean in your situation but maybe you do...

At last... I know it sounds weird but maybe a fresh install will help...
I did it a few days ago and suddenly Foundation for Email was fixed without any update or so...

Uninstall foundation by using:

npm uninstall --global foundation-cli

Than reinstall by using:

npm install --global foundation-cli

If that also wont do the trick, maybe you can upload the complete folder so i can look into it by using the foundation watch command on my system. The reason im sayin that is to check if some of your settings are messed up or something. Because the code i replied works fine for me (Foundation 6.2).

Kevin Gerz over 3 years ago

Don't think it's because of WhatInput V2, because I'm currently running V1.1.4 (as Foundations bower.json recommend)

I didn't create a new project, but will do this asap. The CLI I already reinstalled. s:

I'll create a new project, and test it out, maybe sth. messed up, but then the upgrade guide is not working as good as it seems..

I give a reply, when I checked everything, with creating a new project.

Kevin Gerz over 3 years ago

Okay.. Okay.. installed a new site-project. First things -> Foundation-CLI didn't really worked in this process (don't know..). Installed it manually by cloning the repo, etc.

Copied the EXACT same files from my main project to the test project, just to see what happens. Result: It works?! Why.. what the heck .. I.. don't.. yes.. of course.. meh..

I have absolutly no clue why it works now, but I will take a closer look into the thing, by comparing every file in the root folder. Maybe I did something wrong, when I upgraded the template. If so, I will post a reply later on.

Thanks for your help :), but if it's tedious to create a new project everytime.. >.>