Work with Foundation Menu (From JointsWP)

functions.php

register_nav_menus(
	array(
		'main-nav' => __( 'The Main Menu', 'jointswp' ),   // Main nav in header
		'footer-links' => __( 'Footer Links', 'jointswp' ), // Secondary nav in footer
                'social_menu' => __( 'Social', 'jointswp' ) // Secondary nav in footer
	)
);

// The Off Canvas Menu
function joints_off_canvas_nav() {
	 wp_nav_menu(array(
        'container' => false,                           // Remove nav container
        'menu_class' => 'vertical menu',       // Adding custom nav class
        'items_wrap' => '<ul id="%1$s" class="%2$s" data-accordion-menu>%3$s</ul>',
        'theme_location' => 'main-nav',        			// Where it's located in the theme
        'depth' => 5,                                   // Limit the depth of the nav
        'fallback_cb' => false,                         // Fallback function (see below)
        'walker' => new Off_Canvas_Menu_Walker()
    ));	
} 

class Off_Canvas_Menu_Walker extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth = 0, $args = Array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"vertical menu\">\n";
    }
}

header.php

<!-- By default, this menu will use off-canvas for small
	 and a topbar for medium-up -->

<div class="top-bar" id="top-bar-menu">
    <div class="row">
            <div class="logo-container top-bar-left">
		<div class="logo">
                    <a href="<?php echo site_url('/'); ?>">
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo.jpg">
                    </a>
                </div>
            </div>
	<div class="show-for-medium">
		<?php joints_top_nav(); ?>	
	</div>
	<div class="top-bar-right show-for-small-only">
		<ul class="menu">
			<li><button class="menu-icon" type="button" data-toggle="off-canvas"></button></li> 
			<!--<li><a data-toggle="off-canvas"><?php //_e( 'Menu', 'jointswp' ); ?></a></li>-->
		</ul>
	</div>
    </div>
</div>