WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Add second menu to Twenty Twelve (10 posts)

  1. zeaks
    Member
    Posted 1 year ago #

    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 -->
  2. zeaks
    Member
    Posted 1 year ago #

    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.

    So I did that, then copied the original navigation.js to the child theme, and added duplicate code to it changing the document.getElementById( 'site-navigation' ) to "lower-navigation" (maybe not the best way to do it, but I don't know javascript very well)

    It did dequeue the script and load my new one, but it still wasn't working and now both menus were stuck closed.
    So as a test, I removed my dequeue/enqueue code and added my new javascript code directly to the parent theme file and both menus worked! This is useless though as I want the changes to be made to the child theme.

    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

  3. zeaks
    Member
    Posted 1 year ago #

    Solved this, I didn't properly queue the new js file.

  4. gr8
    Member
    Posted 1 year ago #

    Mind sharing the recipe you used for proper queue of the new js file?

  5. zeaks
    Member
    Posted 1 year ago #

    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/

  6. gr8
    Member
    Posted 1 year ago #

    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

  7. zeaks
    Member
    Posted 1 year ago #

    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.

  8. gr8
    Member
    Posted 1 year ago #

    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.

  9. zeaks
    Member
    Posted 1 year ago #

    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.

  10. gr8
    Member
    Posted 1 year ago #

    oops, tpyo. found it - Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic