我之前回答过，但我提供的链接已经不存在了。所以，我将在这里发布代码，希望它就是您所要寻找的。
在您的功能中。php，添加以下代码段以创建标记：
/* Mobile Menu
----------------------------------------------------------------------------------------*/
add_action( \'genesis_site_description\', \'ls_mobile_menu_toggle\', 5 );
function ls_mobile_menu_toggle() {
echo \'<div class="menu-toggle">\';
echo \'<li></li><li></li><li></li>\';
echo \'</div>\';
}
在JS文件中，输入以下代码片段以实现打开/关闭功能：
// Show/hide the main navigation
$(\'.menu-toggle\').click(function() {
$(this).toggleClass(\'open\');
$(\'.header-widget-area\').toggleClass(\'expanded\');
});
最后，您的风格：对于桌面：
.menu-toggle {
display: none;
visibility: hidden;
}
对于您选择的媒体查询：
.menu-toggle {
background: #000;
color: #FFF;
cursor: pointer;
display: block;
float: none;
height: 40px;
margin: 3rem auto 1rem;
overflow: hidden;
padding: 4px 10px;
text-align: center;
visibility: visible;
width: 46px;
}
.menu-toggle li {
background: #FFF;
display: block;
height: 4px;
margin: 5px auto;
}
.menu-toggle a:hover,
.menu-toggle a:active {
text-decoration: none;
}
.header-widget-area {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;
}
.header-widget-area.expanded {
max-height: 100px;
}
您可能需要更改媒体查询中的选择器，但不必这样做。风格随心所欲。
您可能还需要提供标题区域：
position: relative;
