Drop Down Menu Collapses on mobile scroll

[CinkadeusParticipant Posts: 1]

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

[cantonParticipant Posts: 1]

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

[SeanKeymaster Posts: 4444]

Hi :),

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");  
                }
            }
        });
    };

 

[CinkadeusParticipant Posts: 1]

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

[SeanKeymaster Posts: 4444]

Hi :),

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.