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

Hello, I’ve been trying to add small-menu.js to my website. When the screen is smaller, the main menu disappears, words ‘Main Menu’ appear instead, which is the right way forward, but it doesn’t click in order to open the menu and I can’t manage to find the problem.
The site is under construction, but I duplicated the menu problem here.

Here is my small_menu.js script:

/**
 * Handles toggling the main navigation menu for small screens.
 */
jQuery( document ).ready( function( $ ) {
	var $subsidiary = $( '#branding' ),
	    timeout = false;

	$.fn.smallMenu = function() {
		$subsidiary.find( '#access' ).addClass( 'main-small-navigation' );
		$subsidiary.find( '#access h3' ).removeClass( 'assistive-text' ).addClass( 'menu-label' );
		$subsidiary.find( '#access .menu-handle' ).addClass( 'menu-toggle' );

		$( '.menu-toggle' ).unbind( 'click' ).click( function() {
			$subsidiary.find( '.menu' ).toggle();
			$( this ).toggleClass( 'toggled-on' );
		} );
	};

	// Check viewport width on first load.
	if ( $( window ).width() < 800 )
		$.fn.smallMenu();

	// Check viewport width when user resizes the browser window.
	$( window ).resize( function() {
		var browserWidth = $( window ).width();

		if ( false !== timeout )
			clearTimeout( timeout );

		timeout = setTimeout( function() {
			if ( browserWidth < 800 ) {
				$.fn.smallMenu();
			} else {
				$subsidiary.find( '#access' ).removeClass( 'main-small-navigation' );
				$subsidiary.find( '#access h3' ).removeClass( 'menu-label' ).addClass( 'assistive-text' );
				$subsidiary.find( '#access .menu-handle' ).removeClass( 'menu-toggle' );
				$subsidiary.find( '.menu' ).removeAttr( 'style' );
			}
		}, 200 );
	} );
} );

I added this to the functions.php to enqueue the script in the footer:

wp_enqueue_script( 'small_menu', get_template_directory_uri() . '/js/small_menu.js', array( 'jquery' ), '20120206', true );

Thanks

[Moderator Note: No bumping. If it’s that urgent, consider hiring someone.]