Php 响应式滑出菜单wordpress

我使用本教程在自定义wordpress主题中构建了一个响应性滑出菜单：

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

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

//* 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>';

}

---

请查看下面的帖子。

---

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

如果以后有人有同样的问题，我会通过如下方式标记标题来解决：

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

嗨！谢谢你的回答，但这不是我想要的。我正在使用的jQuery代码也支持滑动，它工作得很好，我只是在较小的屏幕上隐藏/显示有问题：）

#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;
}

}

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