This topic contains 4 replies, has 3 voices, and was last updated by Sean 3 years, 10 months ago.
Drop Down Menu Collapses on mobile scroll
-
Member Reply #855
On mobile devices such as iPad, iPhone, and even Chrome for Android I’m running into a menu issue. When you click the menu and then a sub-menu, you have to scroll to see all the options. When you do scroll, the menu then collapses before you can click any options. The odd thing is that if I use the same mobile device to go to the Metronic demo pages (admin template 3 with default settings), the menu does not collapse on scroll. Issue cannot be reproduced in Chrome’s developer mode on a desktop.
Site with the issue: http://www.cornerjackets.com (totally safe for work, its a local ballpark website.)
Member Reply #865I believe I reported this same issue a couple months ago, and I think KeenThemes fixed it in a fairly recent release (around March or April 1st). Are you running the latest code?
Support Staff Reply #870Hi :),
Great use of Metronic. Would like to want to list it in our showcast – http://keenthemes.com/forums/forum/general/showcast/ ? 🙂
Back to the issue, seems you are using an older version but you can fix it by updating handleMainMenu function in layout.js with below code:
// Handles main menu var handleMainMenu = function () { // handle menu toggler icon click $(".page-header .menu-toggler").on("click", function(event) { if (Metronic.getViewPort().width < resBreakpointMd) { var menu = $(".page-header .page-header-menu"); if (menu.is(":visible")) { menu.slideUp(300); } else { menu.slideDown(300); } if ($('body').hasClass('page-header-top-fixed')) { Metronic.scrollTop(); } } }); // handle sub dropdown menu click for mobile devices only $(".hor-menu .dropdown-submenu > a").on("click", function(e) { if (Metronic.getViewPort().width < resBreakpointMd) { if ($(this).next().hasClass('dropdown-menu')) { e.stopPropagation(); if ($(this).parent().hasClass("open")) { $(this).parent().removeClass("open"); $(this).next().hide(); } else { $(this).parent().addClass("open"); $(this).next().show(); } } } }); // handle hover dropdown menu for desktop devices only if (Metronic.getViewPort().width >= resBreakpointMd) { $('.hor-menu [data-hover="megamenu-dropdown"]').not('.hover-initialized').each(function() { $(this).dropdownHover(); $(this).addClass('hover-initialized'); }); } // handle auto scroll to selected sub menu node on mobile devices $(document).on('click', '.hor-menu .menu-dropdown > a[data-hover="megamenu-dropdown"]', function() { if (Metronic.getViewPort().width < resBreakpointMd) { Metronic.scrollTo($(this)); } }); // hold mega menu content open on click/tap. $(document).on('click', '.mega-menu-dropdown .dropdown-menu, .classic-menu-dropdown .dropdown-menu', function (e) { e.stopPropagation(); }); // handle fixed mega menu(minimized) $(window).scroll(function() { var offset = 75; if ($('body').hasClass('page-header-menu-fixed')) { if ($(window).scrollTop() > offset){ $(".page-header-menu").addClass("fixed"); } else { $(".page-header-menu").removeClass("fixed"); } } if ($('body').hasClass('page-header-top-fixed')) { if ($(window).scrollTop() > offset){ $(".page-header-top").addClass("fixed"); } else { $(".page-header-top").removeClass("fixed"); } } }); };
Member Reply #1000Updating my layout.js file to 3.8.1 did the trick. I really appreciate it. I updated a lot of the files when 3.7 dropped but the layout file didn’t make the list.
And thanks for the vote of support. I love Metronic. All site content is 100% dynamic too. There’s an extensive MVC backend I designed to handle adding sports, teams, games, and scores. It also has Facebook/Google/Twitter login authentication but I haven’t publicly implemented it yet. Its by far the best little league website in our area. It was a hobby project of mine.
Support Staff Reply #1007Hi :),
Glad to hear that. Yes, your site looks amazing. One of great uses of Metronic. If you like to list it in our showcast(http://keenthemes.com/showcast/) please let us know.
Thanks.
You must be logged in to reply to this topic.