Question

http://thehamburgercollection.com/shop/＆lt; ＆LT;这是网站。

我尝试创建一个汉堡包菜单，菜单项直接放在汉堡图标下方（例如平板电脑和手机尺寸的this示例）。

目前，我的菜单位于我的WordPress主题中的footer.php中：

label(Vars),

如您所见，菜单无法显示在主页上。

在this tutorial之后，我试图在wp_nav_menu（）函数中包含一个div，如下所示：

<?php

if ( ! is_front_page() && ! is_home() ) {
    wp_nav_menu();  
} 
?>

然后我将JQuery代码复制并粘贴到名为navigation.js的JS文件中，并在functions.php中包含该文件

<div class="mobile-nav">

    <div class="menu-btn" id="menu-btn">
        <div></div>
        <span></span>
        <span></span>
        <span></span>
    </div>

    <div class="responsive-menu">

    <?php

    if ( ! is_front_page() && ! is_home() ) {
        wp_nav_menu();  
    } 
    ?>

    </div>

</div>

我还将CSS代码复制并粘贴到我的style.css文件中。除非我错过了什么，否则我完全按照教程所说的去做，但仍然没有结果。关于为什么教程没有工作的任何想法，或者如果你有任何其他建议来创建我正在寻找的特定汉堡菜单？

Answer 1

我看到的两大问题（但很容易解决）。

1）style.css的第350行有拼写错误。修复“宽度”的拼写，然后汉堡包按钮显示在平板电脑分辨率下方。

@media screen and (max-wdith: 768px) {

2）您的navigation.js中包含HTML，使其成为无效的JS文件并阻止其执行。您需要从文件中删除所有<script type="text/javascript">和</script>标记 - 这些标记仅用于HTML文档以包含脚本（但从不在脚本文件中）。

在WordPress网站中包含汉堡菜单

1 个答案: