Responsive menu not expanding in footer

In ‘js’ directory in your child theme create file “navigation-footer.js” and paste following code:

/**
 * Handles toggling the footer navigation menu for small screens
 */
( function() {
    var nav = document.getElementById( 'footer-navigation' ), button, menu;
    if ( ! nav ) {
        return;
    }

    button = nav.getElementsByTagName( 'button' )[0];
    menu   = nav.getElementsByTagName( 'ul' )[0];
    if ( ! button ) {
        return;
    }

    // Hide button if menu is missing or empty.
    if ( ! menu || ! menu.childNodes.length ) {
        button.style.display = 'none';
        return;
    }

    button.onclick = function() {
        if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
            menu.className="nav-menu";
        }

        if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
            button.className = button.className.replace( ' toggled-on', '' );
            menu.className = menu.className.replace( ' toggled-on', '' );
        } else {
            button.className += ' toggled-on';
            menu.className += ' toggled-on';
        }
    };
} )();

Add this code to functions.php:

function more_scripts_styles() {
    // Adds JavaScript for handling the footer navigation menu hide-and-show behavior.
    wp_enqueue_script( 'twentytwelve-footer-navigation', get_stylesheet_directory_uri() . '/js/navigation-footer.js', array( 'jquery' ), '20140711', true );
}
add_action( 'wp_enqueue_scripts', 'more_scripts_styles' );