internal page navigation with

Just stumbled onto a useful trick for internal page navigation with anchor links in Twentytwelve, but I’m perplexed by one detail I can’t figure out.

What I discovered is that you can mimmick the site navigation at the top of the page, which is defined by

<nav id="site-navigation" class="main-navigation" role="navigation">

and use your own internal links elsewhere on the page. FI, this code (lifted from main navigation and lightly massaged) produces a responsive horizontal list of three internal links bounded by two <hr>s formatted exactly like the main navigation at the top of the page:

<nav id="site-navigation" class="main-navigation">
<h3 class="menu-toggle"></h3>
<a class="assistive-text" title="Skip to content" href="#content"></a>
<div class="nav-menu">
<ul>
	<li class="page_item page-item-232"><a href="https://www.galbraithmt.com/guide/rides-south-side-2/#pics">TRAIL PICS</a></li>
	<li class="page_item page-item-234"><a href="https://www.galbraithmt.com/guide/rides-south-side-2/#rap">TRAIL RAP</a></li>
	<li class="page_item page-item-236"><a href="https://www.galbraithmt.com/guide/rides-south-side-2/#map">TRAIL MAP</a></li>
</ul>
</div>
</nav>

OK, so far s good. But here’s my problem. This approach works perfectly in every display scenario I’ve encountered, except one. That’s when you’re viewing the site on a smartphone and you have the phone turned in portrait mode (taller than wide).

When you’re viewing the page this way, the main navigation at the top of the page turns into a button labelled “Menu,” but the internal navigation I’ve setup lower down on the page just disappears!

How can I get my internal navigation to turn into a button like the main navigation when the phone is in portrait mode? I’ve tried the

<h3 class="menu-toggle"></h3>

statement, but that doesn’t do it. Really appreciate your help…