Sean Sean - 13 days ago 4
jQuery Question

Including Hamburger Menu In WordPress Site

http://thehamburgercollection.com/shop/ < < Here's the website.

I'm trying to create a hamburger menu where the menu items drop down directly below the hamburger icon (like in this example at Tablet and Mobile size).

Currently, my menu is in footer.php in my WordPress theme:

<?php

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


As you can see, the menu can't appear on the home page.

Following this tutorial, I tried to wrap a div around the wp_nav_menu() function like this:

<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 then copied and pasted the JQuery code into a JS file called navigation.js, and included that file in functions.php

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


I also copied and pasted the CSS code into my style.css file. Unless I'm missing something, I did exactly what the tutorial said to do and still am getting no result. Any ideas as to why the tutorial isn't working or if you have any other suggestions for creating the specific hamburger menu that I'm looking for?

Answer

Two big problems I'm seeing.

1) There's a typo on line 350 of your style.css. Fix the spelling of "width", and then the hamburger button shows up below tablet resolution.

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

2) Your navigation.js has HTML in it, making it an invalid JS file and preventing it from executing. You need to remove all of the <script type="text/javascript"> and </script> tags from the file - those tags are only used on HTML documents to include scripts (but never inside script files).

Comments