underscores mobile menu using wp_get_nav_menu_items
-
Hi,
I am using underscores theme and used wp_get_nav_menu_items to create a home page menu because it allowed me to introduce html into various lis but it seems to have broken the theme’s mobile menu functionality. It is broken in that my menu doesn’t get hidden and clicking the button does nothing. The console isn’t reporting errors in the js and there are no php errors (wp-config set to true)? I have another menu which uses wp_nav_menu on all other pages.
In reading WP documentation on the function https://codex.www.ads-software.com/Function_Reference/wp_get_nav_menu_items https://codex.www.ads-software.com/Function_Reference/wp_get_nav_menu_items, I read” The nav menu location is not a valid argument.” Is this the problem? I have also read other posts on the topic which indicate that the issue is in the location, or in the wrapping element of the menu.
In my header.php I have:<div id="page" class="hfeed site"> <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'sgm' ); ?></a> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'sgm' ); ?></button> <?php // wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu') ); ?> <header id="masthead" class="site-header" role="banner"> <?php if(is_front_page()) { include(TEMPLATEPATH . '/inc/sgm-primary-header.php'); } else { include(TEMPLATEPATH . '/inc/sgm-secondary-header.php'); } ?> </header><!-- #masthead -->
My first header (sgm-primary-header) uses:
<ul id="sgmnav"> <?php $args = array( 'order' => 'ASC', 'orderby' => 'menu_order', 'post_type' => 'nav_menu_item', 'post_status' => 'publish', 'output' => ARRAY_A, 'output_key' => 'menu_order', 'nopaging' => false, 'update_post_term_cache' => false ); $items = wp_get_nav_menu_items('sgm-header-menu', $args); $count = 0; $submenu = false; foreach( $items as $item ):
and my second (sgm-secondary-header) uses:
echo '<div class="sgm_nav_wrap">'; $defaults = array( // 'theme_location' => 'sgm-header-menu', 'menu' => '', 'menu' => 'primary-menu', 'container' => '<div>', // 'container' => false, 'container_class' => '', 'container_id' => 'sgm_menu_container', 'menu_class' => 'sgm-secondary', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'depth' => 0, 'walker' => '' ); wp_nav_menu( $defaults );
Then, in page.php, index.php and my page templates I have:
if(is_front_page() || is_home()) { get_header('front_page_header'); } else { get_header('sgm-secondary-page-header'); } ?>
In functions.php I have:
if (function_exists('register_nav_menus')) { register_nav_menus( array( 'primary' => esc_html__( 'Primary Menu', 'sgm' ), 'main_nav' => esc_html__('Main Navigation Menu', 'sgm'), 'sgm-header-menu' => esc_html__('SGM Header Menu', 'sgm'), ) ); }
Unfortunately, I’m developing this locally; so I can’t link to it. Has anyone else created custom headers this way and got the mobile menu to work? I greatly appreciate your help and insights!
- The topic ‘underscores mobile menu using wp_get_nav_menu_items’ is closed to new replies.