Duplicated primary menu doesn't appear in smaller widths

I’ve duplicated the primary menu by doing this in the header…

<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
			<?php wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

And this in functions.php

// This theme uses wp_nav_menu() in one location.
	register_nav_menu( 'primary', __( 'Primary Menu', 'twentytwelve' ) );
	register_nav_menu( 'secondary', __( 'Secondary Menu', 'twentytwelve' ) );

This theme converts the primary menu into a button if the screen size becomes small(awesome feature) but my duplicated secondary menu doesn’t become a button it just goes away… until the screen gets bigger again… make sense?

Try it out HERE to see what I mean.

Thanks heaps, Pete