I have two separate menus that are displayed when my page is shown full screen but when displaying on phones and smaller screens I would like to use just one menu that holds links to pages from both of the original menus.
To do this I have created a third menu that holds links to all the pages and would like this third menu to display when the wordpress menu toggle action fires.
However I am at a loss as to how to get the third menu to display in place of the main navigation menu which seems to come up by default.
The code in my header so far is simply as follows: (this doesn't show the second menu code as that is shown elsewhere on the page)
At the moment this correctly displays the main navigation menu as I want it to in full screen and then also displays this same menu again with the menu toggle function as smaller sizes. However I want the third menu to show up instead at the smaller sizes and I have tried all sorts of variations between the h3 tags to try to make the menu I want show up but can't crack it!
I can actually get the menu I want to display by doing the following but the menu I don't want is also displayed!
I have been in to functions.php as well as navigation.js but can't seem to find where the menu to use is being defined and therefore can't find where to change it - any help would be massively appreciated!!
Thanks in advance
To do this I have created a third menu that holds links to all the pages and would like this third menu to display when the wordpress menu toggle action fires.
However I am at a loss as to how to get the third menu to display in place of the main navigation menu which seems to come up by default.
The code in my header so far is simply as follows: (this doesn't show the second menu code as that is shown elsewhere on the page)
Code:
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
</nav>At the moment this correctly displays the main navigation menu as I want it to in full screen and then also displays this same menu again with the menu toggle function as smaller sizes. However I want the third menu to show up instead at the smaller sizes and I have tried all sorts of variations between the h3 tags to try to make the menu I want show up but can't crack it!
I can actually get the menu I want to display by doing the following but the menu I don't want is also displayed!
Code:
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?><?php wp_nav_menu( array( 'theme_location' => 'small-screen-nav-menu', 'menu_class' => 'nav-menu' ) ); ?></h3>I have been in to functions.php as well as navigation.js but can't seem to find where the menu to use is being defined and therefore can't find where to change it - any help would be massively appreciated!!
Thanks in advance