Zurb Foundation Classes not working in Wordpress, they show up in WebKit Inspector

Question

This is the menu code of header.php in my wordpress theme:

<?php wp_nav_menu( array( 
'theme_location'    => 'header-menu',
'container'         => 'nav',
'container_class'   => 'elephant-menu, show-on-desktops, hide-on-phones, hide-on-tablets'
 ) ); ?>

<?php wp_nav_menu( array( 
'theme_location'    => 'mobile-header-menu',
'container'         => 'nav',
'container_class'   => 'show-on-phones, hide-on-desktops, hide-on-tablets'
 ) ); ?>

elephant menu styles a menu bar and show..et.al... classes are from Zurb-Foundation and outside of wordpress they work great and turn things on and off... what am I missing here?

I don't know enough about the inner workings of Zurb Foundation to ditch it... but i get the feeling its a javascript somewhere.

What should happens is the top menu should turn off and show just the mobile one.

The menus are already properly defined in functions.php and load just fine.

Answer 1

For starters... ditch the commas in 'container_class'.

The string provided to 'container_class' will be used almost verbatim as class values (the string is escaped first).

Secondly, WordPress does NOT by default generate Zurb Foundation-compatible menus. In fact, you have to effectively bypass WordPress's entire wp_nav_menu() function in order to output completely Zurb-compatible HTML.