small-menu.js click doesn't work..?

Hi, could anyone give me a helping hand with this problem above?.. thanks :}

Hi Andrew! Thanks a million for replying 🙂
I found it online so didn’t have anyone to speak about it to.. I first used Cazuela theme’s small-menu.js and their jquery call (I worked with Cazuela before and liked small-menu), then searched other themes using this small-menu.js trying to find where I was failing, and in the end the code I’ve used last (and above) was from this support forum topic as the person said it had worked for him..
Could you tell me where I should add “menu-toggle” class element?
EDIT: do I add it to html header.php after navigation and call wp nav inside it?…

Thanks, I’ll try to work on it now that I know what I’m missing, you’re a star, thanks again! 🙂

Hi Andrew and other helpers! 🙂

So I’m back, soon finishing the website and the problem is, that the menu toggle doesn’t always work.. If you go here again, where I duplicated the menu and the problem, if you resize the window, or go on the phone, sometimes menu doesn’t open at all if I click on the menu-toggle button.. Any chance you can check what is the problem with it? Would really appreciate it!

I was also wondering if there’s something to add to the script so that the children items open up right underneath the parent item if the parent item is clicked on, pushing the rest of the menu items down? Because now it opens up floating, and in my original website I can’t click on any of the child menu items when visiting the site on the phone..?

Thanks a lot,
Dom

Here’s the mobile menu script I have that you gave me:

$ = jQuery;
var $windowWidth = $( window ).width();

$( document ).ready( function() {
	mobileMenu();
});

$( window ).resize( function() {
	$windowWidth = $( window ).width();
	mobileMenu();
});

function mobileMenu() {

	var $menu      = $( '#menu-menu-1' );
	var $toggleBtn = $( '.toggle-menu' );

	if ( $windowWidth <=768 ) {

		//Hide the menu
		$menu.hide();

		//Only add the toggle button if it doesn't exist
		if ( $toggleBtn.length == 0 ) {
			$menu.before( '<a href="#" class="toggle-menu"><span>☰</span></a>' );
		}

		//On click of the toggle button
		$toggleBtn.click( function() {
			//Show or hide the menu
			$menu.toggle();
		});

	}
        //If the window size is greater than your breakpoint
        else {

		//Show the menu
		$menu.show();

		//Hide the toggle button
		$toggleBtn.remove();

	}

}

And that’s how I enqueued the script in functions.php:

function wpb_adding_scripts() {
wp_register_script('small_menu', get_template_directory_uri() . '/js/small_menu.js', array('jquery'),'20120206', true);
wp_enqueue_script('small_menu');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );