[axeninja10Participant]

Hi,

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?

[axeninja10Participant]

This reply has been marked as private.

[u kParticipant]

Same problem here.
Chrome on Android.

[axeninja10Participant]

Just found this thread.

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

[axeninja10Participant]

update theme and plugins … and see how it goes.

[u kParticipant]

Update fixed it.
Thanks.

[ChristianModerator]

You’re welcome UK.

[axeninja10Participant]

Hi, I updated the theme and plugins and now the auto collapse problem is fixed.

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?

[CousettMember]

Could you try this by adding at your customizer’s custom javascript?

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.

[GartenfroschParticipant]

I have this problem also.
Please can you tell me exactly where do enter “s-mobile-collapse” ? On the page, customizer …?

Thanks for your help

[ChristopherModerator]

Hi there,

Put the JS code under Customize -> Custom -> JavaScript and put the CSS code under Customize -> Custom ->CSS.

Thank you.

[GartenfroschParticipant]

Thank you for your reply but I know that. I need to know where to put the “s-mobile-collapse”.

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

Thanks

[CousettMember]

It will go on the menus page as a class for the submenu items. I hope this helps.

[GartenfroschParticipant]

Thanks it works now :-). For anyone else having the same problem adding a class to the parent menu as I have you have to enable “advanced menu properties” on the menu page under “Screen Options” at the top. Only then do you see the class option on each menu. Add “s-mobile-collapse” to the parent menu that you don’t want to auto-expand then away you go.

[Paul RModerator]

You’re welcome. 🙂

[Author]

Posts