切换菜单以使用菜单切换 wordpress 显示

Question

当我的页面全屏显示时，我有两个单独的菜单，但在手机和小屏幕上显示时，我只想使用一个菜单，其中包含两个原始菜单中的页面链接。

为此，我创建了第三个菜单，其中包含指向所有页面的链接，并希望在触发 wordpress 菜单切换操作时显示第三个菜单。

但是我不知道如何让第三个菜单显示在默认情况下似乎出现的主导航菜单的位置。

到目前为止，我的标题中的代码如下：（这不会显示页面其他地方显示的第二个菜单代码）

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

目前，这可以正确地全屏显示主导航菜单，然后使用菜单切换功能再次显示相同的菜单，并以较小的尺寸显示。但是，我希望第三个菜单以较小的尺寸显示，并且我尝试了 h3 标签之间的各种变体以尝试使我想要显示但无法破解的菜单！

我实际上可以通过执行以下操作获得我想要显示的菜单，但我不想要的菜单也会显示出来！

 <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?><?php wp_nav_menu( array( 'theme_location' => 'small-screen-nav-menu', 'menu_class' => 'nav-menu' ) ); ?></h3>

我已经使用了functions.php 和navigation.js，但似乎无法找到定义要使用的菜单的位置，因此无法找到更改它的位置 - 任何帮助将不胜感激！ ！

提前致谢

Answer 1

使用媒体查询来显示或隐藏内容：

@media only screen and (min-width: 480px) and (max-width: 767px) {
    #site-navigation{display:none;}
    h3.menu-toggle{display:block;}
}

否则，您需要了解更多关于 wp_nav_menu() 的工作原理read this