Adding Top Menu in Mobile Only

  • Hello … I’m hoping someone can assist me with a task related to a challenging project! In this site, built using a twenty-twelve child theme, the primary navigation is located in a sticky footer. They now want the mobile menu to display at the top rather than in the sticky footer (but only in the mobile version). I’ve followed the solution at the link below:

    Zeaks Blog: Add second menu to Twenty Twelve Theme

    However, the menu I’ve created doesn’t show up in the mobile. According to the tutorial, I should be able to go to appearance > menus and assign my menu (primary-mobile) to the new location. But it doesn’t appear there … only the locations primary and footer appear. Could that be why the menu isn’t showing?

    (as an aside, the client only wanted a header image in the home page, in case you are wondering ….)

    Here is some code in pastebin (all within child theme) based upon the solution linked above:

    header.php code

    code at bottom of navigation.js file

    Code in functions.php

    Thanks for any guidance anyone can provide.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter robinbutton

    (@robinbutton)

    I’m sorry, I forgot to include a link to the site.

    Here it is

    Thread Starter robinbutton

    (@robinbutton)

    I came up with another solution, and was able to resolve my problem. I removed the code from the solution above and instead created a custom menu, added a line in my functions.php file to register the menu, which allows it to come into the dashboard > appearance > menus area as another menu:

    register_nav_menu( 'mobile', __( 'Header Menu', 'twentytwelve' ) );

    And then added the nav code to my header.php:

    <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 -->

    The only problem I’m having is that the menu button doesn’t work. I’ve created a new topic for this problem at the link below:

    Menu Button Doesn’t Work in Twenty Twelve Mobile

    If the problem relates to my resolution of this topic, I will post an update. If there’s no update and your menu button doesn’t work, check out the above topic link.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Adding Top Menu in Mobile Only’ is closed to new replies.