[axeninja10Participant]

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?

[MrinalMember]

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.

[axeninja10Participant]

This reply has been marked as private.

[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.

[Louise CParticipant]

This reply has been marked as private.

[Paul RModerator]

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

[Louise CParticipant]

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.

[Paul RModerator]

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

[Louise CParticipant]

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

[Paul RModerator]

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

[Louise CParticipant]

Perfect! All good – excellent service, as always.

[CousettMember]

Glad we were able to help. Have a nice day.

[Delphine AParticipant]

Hi

I would like to do the same thing and i’ve tried to follow what you said but it didn’t work for me. I’m not sure to have done it properly. Can you sum up everything please ?

Thank you so much for your support !

Delphine

[Paul RModerator]

Hi Delphine,

Thanks for writing in! Can you provide us with your site url to ensure that we can provide you with a tailored answer to your situation.

Thanks

[Louise CParticipant]

Update: Although the parent items now expand only when clicked, the submenus display only briefly and then flick off again. I had this problem before with the whole menu and thought it was fixed. Can you please have another look?

Thanks,
Louise

[Author]

Posts