Mobile SubMenus are all expanded By default – Themeco Community

Mobile SubMenus are all expanded By default

axeninja10 — Wed, 24 Sep 2014 09:29:59 +0000

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 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?

Reply To: Mobile SubMenus are all expanded By default

Mrinal — Wed, 24 Sep 2014 12:33:07 +0000

Hi There,

Thanks for writing in!

To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Reply To: Mobile SubMenus are all expanded By default

axeninja10 — Wed, 24 Sep 2014 15:25:16 +0000

This reply has been marked as private.

Reply To: Mobile SubMenus are all expanded By default

Cousett — Wed, 24 Sep 2014 16:00:32 +0000

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.

Reply To: Mobile SubMenus are all expanded By default

Louise C — Fri, 26 Sep 2014 04:48:06 +0000

This reply has been marked as private.

Reply To: Mobile SubMenus are all expanded By default

Paul R — Fri, 26 Sep 2014 11:13:19 +0000

Hi Louise,

Thanks for the login details.

Can you try the code below.

You can add this under Custom > CSS in the Customizer.


@media (max-width: 979px){
ul.sub-menu {
display:none !important; 
visibility:hidden !important;
}
}

Best Regards

Reply To: Mobile SubMenus are all expanded By default

Louise C — Mon, 29 Sep 2014 01:23:38 +0000

Thanks, that worked to some extent – it collapses the mobile menu to parent items only but it doesn’t allow the parent items to expand on mobile.

Reply To: Mobile SubMenus are all expanded By default

Paul R — Mon, 29 Sep 2014 08:48:34 +0000

Hi Louise,

Sorry about that.

Please add the code below.


@media (max-width: 979px){
ul.sub-menu.mobile-collapsed {
    display:block !important; 
    visibility:visible !important;
}
}

Best Regards

Reply To: Mobile SubMenus are all expanded By default

Louise C — Mon, 29 Sep 2014 23:20:51 +0000

Below is my css – adding the above code made the whole menu expand again on mobile view:

*/Collapse menu on mobile*/
.sf-menu ul.mobile-collapsed {
   display: none !important;
   visibility: none !important;
}

@media (max-width: 979px){
ul.sub-menu {
display:none !important; 
visibility:hidden !important;
}
}

@media (max-width: 979px){
ul.sub-menu.mobile-collapsed {
    display:block !important; 
    visibility:visible !important;
}
}

I’ve played around with different configurations, but I can’t seem to make it work.

Cheers,
Louise

Reply To: Mobile SubMenus are all expanded By default

Paul R — Tue, 30 Sep 2014 08:26:59 +0000

Hi Louise,

Sorry it should be the other way around.


@media (max-width: 979px){
ul.sub-menu {
display:block !important; 
visibility:visible !important;
}
}

@media (max-width: 979px){
ul.sub-menu.mobile-collapsed {
    display:none !important; 
    visibility:hidden !important;
}
}

I fix it for you, please check on your end.

Thanks