[Resolved] Add second menu to Twenty Twelve
I’m trying to add a second menu area to a Twenty Twelve child theme. I have it working and in the proper place. The only issue is the mobile menu, it displays closed, and will not open.
Basically all I did was add the new menu area to functions, then copy the menu code from the original menu and add it below the header and changed the nav ID name.
<nav id="site-navigation-lower" class="main-navigation" role="navigation"> <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3> <div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div> <?php wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_class' => 'nav-menu' ) ); ?> </nav><!-- #site-navigation -->
Sort of have this working. The new menu (mobile) refused to open, so I figured I could override the /js/navigation.js with one in a child theme. I guess that doesn’t work unless I dequeue the original first.
It did dequeue the script and load my new one, but it still wasn’t working and now both menus were stuck closed.
Could someone look at my code and tell me if I’ve done something wrong? I’ve posted all of my changes from header, functions and navigation.js here http://pastebin.com/0BZteS3c
Mind sharing the recipe you used for proper queue of the new js file?
I don’t remember what I did, but I wrote a tutorial on adding a second menu which has been updated for the newest twenty Twelve version http://zeaks.org/tutorials/add-second-menu-to-twenty-twelve-theme/
Thanks, looks to me like that adds a second menu that changes the <nav id=”second-navigation” yet leaves the class=”main-navigation” and ‘menu_class’ => ‘nav-menu’ unchanged (pardon my shorthand) so they share the same css.
How to make the changes to the js file that creates two independent navigation menus, each with their own unique style css and locations? And… both work in the twenty twelve mobile menu view?
Think you left an extra ) in your tutorial when registering the second nav in functions.php
You can use the menu_id parameter http://codex.wordpress.org/Function_Reference/wp_nav_menu then style it using whatever Id you’ve used.
The menu will also have a unique class depending on the name of the active menu. Check it with firebug.
Yes, I’ve been successful at changing id and style of menu-two just can’t seem to keep it contained and functioning in the mobile menu view? When I found this post thought it was relevant to the js file? Thanks again for the feedback.
I’m, not sure what exactly you want to do with the js file. The post I linked creates a second menu that works in mobile, de-queues the original js file and queues the new js file with the second menu code added to it, and you just said you know how to style it separately.
- The topic ‘[Resolved] Add second menu to Twenty Twelve’ is closed to new replies.