Menu icon Foundation
Foundation top bar broken... Or docs outdated?

I set up Foundation on some of my websites using Bower, and copied and pasted the top bar HTML from this page: http://foundation.zurb.com/sites/docs/responsive-navigation.html ('responsive toggle' version) into my project.  The top bar appeared broken, as in the image here.

I assumed I must have been doing something wrong, so I then tried creating new projects with the Foundation client, both in libsass (since I use node) and with compass, and pasted in the top bar html without changing any other code.  It appears broken in the same way... leading me to assume that either the foundation framework code has a bug or the documentation is outdated.  The example on the documentation page seems to work, but I can't get any of the assets download with bower or more indirectly via the Foundation client to display correctly.

More specifically, I would assume that somehow, the javascript for this feature is not triggering, whether the JS code I'm downloading itself is broken, or the JS can't modify the HTML example given in the documentation.  I have double checked that '$(document).foundation();' is in the code and that the foundation function is run by the browser, beyond this I am unsure of how to debug this issue.

Is the top bar working for anyone else? Is there some more updated repo or documentation that I can be looking at?  It's kind of hard to troubleshoot when this appears broken with Foundation's own, out-of-the-box starter kit.

 

Broken top bar on test pageBroken top bar in foundation client project

 

 

topbar

I set up Foundation on some of my websites using Bower, and copied and pasted the top bar HTML from this page: http://foundation.zurb.com/sites/docs/responsive-navigation.html ('responsive toggle' version) into my project.  The top bar appeared broken, as in the image here.

I assumed I must have been doing something wrong, so I then tried creating new projects with the Foundation client, both in libsass (since I use node) and with compass, and pasted in the top bar html without changing any other code.  It appears broken in the same way... leading me to assume that either the foundation framework code has a bug or the documentation is outdated.  The example on the documentation page seems to work, but I can't get any of the assets download with bower or more indirectly via the Foundation client to display correctly.

More specifically, I would assume that somehow, the javascript for this feature is not triggering, whether the JS code I'm downloading itself is broken, or the JS can't modify the HTML example given in the documentation.  I have double checked that '$(document).foundation();' is in the code and that the foundation function is run by the browser, beyond this I am unsure of how to debug this issue.

Is the top bar working for anyone else? Is there some more updated repo or documentation that I can be looking at?  It's kind of hard to troubleshoot when this appears broken with Foundation's own, out-of-the-box starter kit.

 

Broken top bar on test pageBroken top bar in foundation client project

 

 

Alec Sorensen over 3 years ago

Eventually figured out that this likely do to the Foundation client probably pulling from the wrong repository (bower-foundartion, which only goes up to Foundation 5, instead of foundation-sites).

Until that's updated, I'd recommend forgoing the client and either using bower install foundation-sites (if you want to work with Sass) or downloading the zip file, both of which use Foundation 6.