CMS Development

Madahmani
Member

Mobile menu dropdown problems

My website is https://www.marcomm.io/ 

On mobile devices, when the menu is expanded, the menu plus sign toggles the dropdown and I can click and open the pages.

If I tap the menu item and not the plus sign, the dropdown toggles but I can't click the links anymore.

Can you tell me what I am doing wrong?

 

This is the code I have:

 

$('.mainmenu span.child-triggerm').click(function() {
$(this).parent().siblings('.hs-item-has-children').find('span.child-triggerm').removeClass('child-open');
$(this).parent().siblings('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
$(this).next('.hs-menu-children-wrapper').slideToggle(250);
$(this).next('.hs-menu-children-wrapper').children('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
$(this).next('.hs-menu-children-wrapper').children('.hs-item-has-children').find('span.child-triggerm').removeClass('child-open');
$(this).toggleClass('child-open');
return false;
});

 

Thank you

0 Upvotes
1 Reply 1
jzilch
HubSpot Employee
HubSpot Employee

Mobile menu dropdown problems

Hi, 

 

Taking a further look at your mobile menu this looks like the behavior is coming from HubSpot Projects.js file. The child trigger seems to work as expected when clicking on the child trigger but when you click on the menu item the menu appears to open but with no way to close the menu. The projects.js file is added to HubSpot as a helper for customers who don't have a fully customized menu as you do for mobile. There is an event listener that is waiting for a focus on the element and then opens the menu. There is not a blur event listener I believe which would close the menu once you have clicked away from the dropdown. This extra javascript only gets enabled if you have enabled flyouts in the Advanced Menu settings on the template. If you untoggle this setting on the menu this should remove this extra behavior of toggling the menu open. If there has been any styles added that use the flyouts class this has the potential to break these styles. That would be the solution is to untoggle the flyouts class but if you have a developer or designer on staff I would reach out to the team to make sure that when untoggling this setting won't effect or break the menu.