How does Twenty Twelve Nav Menu Work?

I thought I wasn’t going to figure it out, but I did. So here’s the answer in case anyone else wonders.

navigation.js does all the heavy lifting. The main thing it does is add the class “toggled-on” to the item #site-navigation’s child UL element when you click the menu button. When you click the button again, the “toggled-on” class is removed from the ul element. The “toggled-on” class has specific styling in the style.css sheet to control display inline-block and none for the UL. This is how its hidden and revealed everytime you click the button.

Ok thats great, but can you shed any light on how to turn off this function in ie 8/7 because at the moment I cannot use this theme even though it is perfect for me in every other way.
I tried the patch but all it does is spread the nav bar but not the menu out to the proper width.

I found by reducing the min-width to something tiny or 0, stopped it detecting it.

Any thoughts on this?

——————————

/* Minimum width of 600 pixels. */
@media screen and (min-width: 100px) {
.author-avatar {
float: left;
margin-top: 8px;
margin-top: 0.571428571rem;
}

@WTecUk
If you’re looking for support, consider creating your own thread.

Hi, I’m not after support, I was offering a possible solution.

Thanks.

[Moderator note added re the below: any changes to theme files should only be made in a child theme – modifying theme files, especially in the default WP theme is not recommended. You will lose all the changes when WP is updated and it’s crucial that you have an unmodified copy on your site for troubleshooting purposes. ]

Disable Mobile Menu in Twenty Twelve

I have played around with the new theme today and when I checked my template on the iPad I was presented with the Menu button which I didnt like.

So here’s my workaround:

• I opened header.php
• I removed everything between <nav id=”site-navigation” class=”main-navigation” role=”navigation”> and </nav>
• I created a new div – <div id=”topnav”></div>
• I set up a new sidebar ID in functions.php
• I pulled in this sidebar into the header.php like this:
  <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Top Navigation’) ) : ?>
  <?php endif; ?>
• I created a menu and pulled the menu in the new sidebar function
• I can now style my topnav div in CSS as usual, it looks just normal on the iPad now.

Hope that helps ??

WTecUK.net that worked for me – I hate that there’s no way to do this in the stylesheet for the child theme but if it’s the only thing I have to remember to do every time I update then so be it. I hate the responsive menu buttons that much and so do my clients.

Really bad form for WP to force something like that upon us without any way of disabling or removing it without modifying a core theme file.

I would like to try 007webby’s answer, as it looks like a long-term solution, but the client’s site had launched and needed a quick fix.

Thank you.