在WordPress网站中包括汉堡菜单

Question

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

我正在尝试创建一个汉堡菜单，其中菜单项在汉堡图标下方的菜单上落下（例如在平板电脑和移动尺寸的示例中）。

目前，我的菜单在我的wordpress主题中in footer.php：

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

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

本教程之后，我试图在WP_NAV_MENU（）函数上围绕DIV包裹一个Div：

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

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

中

<?php
    wp_enqueue_script( 'wpb_togglemenu', 
    get_template_directory_uri() . '/js/navigation.js',
    array('jquery'), 
    '20160909', true );

我还将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文档上使用以包含脚本（但从未在脚本文件中）。