This topic contains 4 replies, has 3 voices, and was last updated by Sean Sean 3 years, 6 months ago.

Drop Down Menu Collapses on mobile scroll


  • Cinkadeus
    Participant

    Posts: 1
    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.)


    canton
    Participant

    Posts: 1
    Member Reply #865

    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?

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #870

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

     


    Cinkadeus
    Participant

    Posts: 1
    Member Reply #1000

    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.

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #1007

    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.

     

You must be logged in to reply to this topic.