Question

我使用本教程在自定义wordpress主题中构建响应式幻灯片菜单：http://sridharkatakam.com/adding-responsive-side-menu-genesis/

我无法在手机上显示菜单按钮，因为我可以显示整个菜单，也可以不显示菜单。

我猜测它与教程中的这一步有关：

//* Wrap .nav-primary in a #primary-nav-container div
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_after_header', 'genesis_do_subnav', 11 );

add_action( 'genesis_after_header', 'sk_add_opening_div', 9 );
function sk_add_opening_div() {
echo '<div id="primary-nav-container">';
}
add_action( 'genesis_after_header', 'sk_add_closing_div' );
function sk_add_closing_div() { 
echo '</div>';
}

//* Add hamburger font icon below Primary nav
add_action( 'genesis_after_header', 'sk_hamburger_menu' );
function sk_hamburger_menu() {

echo '<div id="primary-nav-link-container"><div class="wrap"><a id="primary-nav-link"               href="#primary-nav-container"><i class="fa fa-bars"></i> Menu</a></div></div>';

}

因为我使用自定义主题我不能使用Genesis钩子来执行上面的代码，所以这是我显示菜单的代码（来自header.php）：

<div id="primary-nav-link-container">
            <div class="wrap">
                <a id="primary-nav-link" href="#primary-nav-container">
                    <i class="fa fa-bars"></i> Menu</a>
                    <div class="nav-primary">
                    <div id="primary-nav-container">
                        <divid="menu">                  
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?>
                                </div>
                            </div>

有没有人有任何想法如何只能在使用CSS媒体查询的移动设备上显示响应式菜单？我使用下面的代码，但这只会导致菜单的桌面版本根本不显示。

CSS：

#primary-nav-link-container {
text-align: center;
display: none;
}

a#primary-nav-link:focus {
outline: none;
}

@media only screen and (max-width: 1023px) {

#primary-nav-container {
display: none;
}

#primary-nav-link-container {
display: block;
}

}

Answer 1

请查看以下帖子。 Responsive Nav

这篇文章中提到了所有关于导航菜单的内容。

Answer 2

如果有人后来遇到同样的问题我会通过标记我的标题来解决这个问题：

<div class="headerarea">

            <div id="primary-nav-link-container">
                <a id="primary-nav-link" href="#primary-nav-container"> <i class="fa fa-bars"></i> Menu</a>                     
                    <div id="primary-nav-container">
                        <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?>  
                        <?php get_search_form(); ?>                         
                    </div>
            </div>          

                    <div id="menu">                 
                            <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?>
                    </div>              


            </div>

并相应调整css。

响应滑出菜单wordpress

2 个答案: