When I click on the menu bar button of my site from a mobile device, it opens up and quickly auto collapses thereafter. I am unable to use the menu bar to access other pages of my site because of this.

How do I fix this?

http://theme.co/x/member/forums/topic/mobile-nav-disappearing/

But I have another issue, which is that: when I click on the menu from a mobile device, the main menu expands; but all the submenus are expanded by default as well. I am planning to add 20-25 pages to the sub menus, and I do not want them all expanded when I click on the main menu. Because it will cause my entire mobile screen to be covered with submenus.

How do I fix this?

var menu_breakpoint = 979;
jQuery(function($){

		$('.s-mobile-collapse > a').click(function(e){
			var current_width = $(window).width();
			if(current_width > menu_breakpoint)	return true;
			else {
				e.preventDefault();
				$('ul.sub-menu', $(this).parent() ).each(function(){
					if( $(this).hasClass('mobile-collapsed') ) $(this).removeClass('mobile-collapsed');
					else $(this).addClass('mobile-collapsed');
				});
			}
		});

		$(window).resize(function(){
			toggle_mobile_menu_visibility($);
		});

		toggle_mobile_menu_visibility($);
});

function toggle_mobile_menu_visibility($) {
			var current_width = $(window).width();
			if (current_width > menu_breakpoint) {
				$('.s-mobile-collapse > ul.sub-menu').removeClass('mobile-collapsed');
				$('#menu-main').addClass('sf-menu');
			} 
			else {
				$('.s-mobile-collapse > ul.sub-menu').addClass('mobile-collapsed');
				$('#menu-main').removeClass('sf-menu');
			}
}

Then add this css at your customizer’s custom css.

.sf-menu ul.mobile-collapsed {
   display: none !important;
   visibility: hidden !important;
}

Then add s-mobile-collapse to each of your parent menu’s class for all level.

Thanks for your help