Oh I can link to the site yes - my bad.
The site is here:
Just to clarify though the live site has slightly different code from what I posted above as the above is my development code and the live site is just using what I believe is the standard twentythirteen code which I think is this:
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
So you can see the output on the live site and I'll explain that below but I have also made a screen grab of the output of the posted development code and that can be found here:
Link to what happens using development code
What I want to happen is just to display the menu C / Smaller screen menu from the above image without the menu A / primary menu showing up as well.
If anything is unclear please let me know and I'll try to clarify - thanks again!
Explanation of what's happening on the live site is:
There is a menu that runs along the top of the screen in a green bar with white writing, this is the primary menu or menu A in my example and then there are some other links below this menu that are in white boxes with green borders. The links here are part of the tab-nav-links menu or menu B in my example.
Then when the screen is collapsed for smaller devices you'll see that at certain screen sizes the primary menu disappears and the menu toggle is displayed whilst the tab-nav-links are still present but then if you shrink the screen more the tab-nav-links menu disappears and there is just the menu toggle button.