I have an update. I switched the theme over to twenty-twelve and the menu button toggled fine. So the problem is in the child theme. I can’t see anything in the child styles.css (no display-none code, for example). I’m wondering if the problem isn’t in my header.php code or my functions.php code. Here it is:
header.php code:
<nav id="primary-mobile" 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-mobile', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #primary-mobile -->
functions.php code
function lylegomes_setup() {
// This theme uses wp_nav_menu() in one location.
register_nav_menu( 'secondary', __( 'Footer Menu', 'twentytwelve' ) );
register_nav_menu( 'mobile', __( 'Header Menu', 'twentytwelve' ) );
}
I was able to acquire a solution, which I will share for the benefit of others. The changes were made to the child theme … not a good idea to make any changes to the parent Twenty-Twelve. I added a js folder to my child theme that contained a navigation.js file which I renamed to nav.js to make it easier to keep track of which js file was being called. Then, I changed the following line:
( function() {
var nav = document.getElementById( 'primary-mobile' ), button, menu;
if ( ! nav )
return;
Note the name of the menu primary-mobile in the parens, which was the only change made to this line.
Then I had to dequeue and enqueue in a child theme functions.php file by adding this code:
function childtheme_scripts() {
wp_dequeue_script( 'twentytwelve-navigation' );
wp_enqueue_script( 'primary-mobile', get_stylesheet_directory_uri() . '/js/nav.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'childtheme_scripts' );
?>
robin,
I hope you’re subscribed to this thread through email. 🙂
I’ve read through your other threads on this topic, especially because you’ve tried Zeak’s method but found a problem. I’m having two sites with issues involving the double mobile menu.
You mention the change to your javascript code above, but it would be helpful to see the full javascript code in order to know what the rest of the code looks like, and not just the changed portion.
My two sites involve the addition of another menu with different content in it. On one site I put the additional menu in the footer, on the other it’s directly above the main menu but styled differently. On the former site, the new bottom menu works fine in mobile, but the original menu doesn’t open up. On the latter site, the main menu works fine, but the new menu is open by default with the listings below and it won’t close. Same script info from Zeak, but different results on two different Twenty Twelve child theme setups.
So I’m interested to see if your javascript code might be my answer.
This adding a second menu to TwentyTwelve seems to be full of pitfalls for the mobile setup, but you were able to get it to work (I looked at your photographer’s site in mobile preview and indeed you did get it to work).
Thanks!
Oh man, I just re-read Zeak’s tutorial and realized I misread his instructions. His javascript code example was to be ADDED TO the end of the script from the parent theme. I set it up as a replacement. Whoops. No wonder it wasn’t working.
Which explains what your javascript example above means. The twenty twelve full javascript navigation.js file.
