How to enable responsive hamburger menu for the footer menu in Infinity Pro

A menu appearing in the Footer Menu location in Infinity Pro will appear expanded at all widths out of the box like this:

If you want to have this secondary menu collapse into a mobile hamburger menu 800px and below similar to the header (primary) menu simply edit Infinity Pro’s functions.php and change

// Define our responsive menu settings.
function infinity_responsive_menu_settings() {

	$settings = array(
		'mainMenu'         => __( 'Menu', 'infinity-pro' ),
		'menuIconClass'    => 'ionicons-before ion-ios-drag',
		'subMenu'          => __( 'Submenu', 'infinity-pro' ),
		'subMenuIconClass' => 'ionicons-before ion-chevron-down',
		'menuClasses'      => array(
			'others' => array(
				'.nav-primary',
			),
		),
	);

	return $settings;

}

to

// Define our responsive menu settings.
function infinity_responsive_menu_settings() {

	$settings = array(
		'mainMenu'         => __( 'Menu', 'infinity-pro' ),
		'menuIconClass'    => 'ionicons-before ion-ios-drag',
		'subMenu'          => __( 'Submenu', 'infinity-pro' ),
		'subMenuIconClass' => 'ionicons-before ion-chevron-down',
		'menuClasses'      => array(
			'others' => array(
				'.nav-primary',
				'.nav-secondary',
			),
		),
	);

	return $settings;

}

Users will then need to click on it to expand and collapse as they want.