I am trying to add two menus to the same location on a wordpress site. Which menu is displayed will be based on which page is being viewed and can be handled easily with CSS.
I created a child theme for TwentySeventeen and added the following files. But still checking 'Top Menu 1' or 'Top Menu 2' displays no menu on my site. More frustratingly, checking Top Menu (which comes by default with the theme) shows a menu.
functions.php
<?php
function register_my_menus() {
register_nav_menus(
array(
'top-menu-1' => __( 'Top Menu 1', 'twentyseventeen' ),
'top-menu-2' => __( 'Top Menu 2', 'twentyseventeen' )
)
);
}
add_action( 'init', 'register_my_menus' );
?>
/template-parts/navigation/navigation-top.php
<?php
/**
* Displays top navigation
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.2
*/
?>
<nav id="site-navigation-child" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Top Menu', 'twentyseventeen' ); ?>">
<button class="menu-toggle" aria-controls="top-menu" aria-expanded="false">
<?php
echo twentyseventeen_get_svg( array( 'icon' => 'bars' ) );
echo twentyseventeen_get_svg( array( 'icon' => 'close' ) );
_e( 'Menu', 'twentyseventeen' );
?>
</button>
<?php
wp_nav_menu(
array(
'theme_location' => 'top-menu-2'
)
);
?>
<?php if ( ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) && has_custom_header() ) : ?>
<a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ); ?><span class="screen-reader-text"><?php _e( 'Scroll down to content', 'twentyseventeen' ); ?></span></a>
<?php endif; ?>
</nav><!-- #site-navigation -->
Shouldn't navigation-top.php have overridden the parent file? If I try to remove the wp_nav_menu line from this file it shows no menu. Which seems to show that it indeed has overridden the parent file. Then why isn't pointing it to a new menu having no effect?