Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am trying to add the vertical nav bar from Foundation 3 to a theme using Foundation 4. As an experiment I created a plain html file with Foundation 4's js and css and added the js and css from Foundation 3 for the navigation only, as well as app.css. Everything worked fine. Here is a gist with that html.

With that in mind I added the same JS and css files from Foundation 3 to my theme and pasted the example menu into my sidebar. You can see the full code here, here is my function for adding all of the foundation assets to my theme.

function _sf_foundation() {
//Foundation scripts/ styles
wp_enqueue_script('foundation', get_template_directory_uri().'/js/foundation.min.js', array( 'jquery' ));
wp_enqueue_style('foundation', get_template_directory_uri().'/css/foundation.min.css');
wp_enqueue_style('foundation', get_template_directory_uri().'/css/normalize.css');
//f3 vertical nav recreation
wp_enqueue_script('f3nav', get_template_directory_uri().'/js/jquery.foundation.navigation.js');
wp_enqueue_style('f3nav-css', get_template_directory_uri().'/css/f3.nav.css');
wp_enqueue_script('f3-app', get_template_directory_uri().'/js/app.js', array(), false, true);
add_action( 'wp_enqueue_scripts', '_sf_foundation' );

When I did this I get two console arrors. "Uncaught TypeError: Cannot read property 'touch' of undefined" for app.js and "Uncaught ReferenceError: Modernizr is not defined jquery.foundation.navigation.js. The flyouts do not work in the vertical navigation.

share|improve this question
add comment

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.