Fix for long sub-menu overflow-y issue in handheld-menu

  • The issue appears when you have a sub-menu that has a larger then the screen can take amount of items while in handheld mode, and when your root menu has only a few items that the mobile device can take without having to scroll.

    By default the .handheld-navigation will have an overflow-y: scroll; which will make it possible for the user to scroll down by accident and hide the root menu prior to expanding the sub-menu that holds a lot of items. This happens because the size of the sub-menu is added to the parent element prior to expanding the sub-menu via the .dropdown-toggle.

    My function takes care of that by listening for a mutation of the code, and by changing the css value of the .handheld-navigation overflow property only after the user clicks the .dropdown-toggle. Then changes again the overflow once the user toggles-off the dropdown.

    You need to have the following css modification too placed in your style.css:
    .storefront-hamburger-menu-active .main-navigation .handheld-navigation { overflow-y: hidden; }

    Add this to your html code(I put it in my header)

    <script type="text/javascript">
    jQuery( document ).ready(function() {

    var obs = new MutationObserver(function(mutations, observer) {
    jQuery.each(mutations, function (i, mutation) {
    var addedNodes = jQuery(mutation.addedNodes);
    var selector = "button.dropdown-toggle" //listen for this target
    var filteredEls = addedNodes.find(selector).addBack(selector); // finds either added alone or as tree
    filteredEls.each(function () { // can use jQuery select to filter addedNodes
    //do this
    jQuery('.dropdown-toggle').click(function(){
    if(jQuery(this).hasClass("toggled-on")){
    jQuery('.handheld-navigation').css("overflow-y", "scroll");
    }else{
    jQuery('.handheld-navigation').css("overflow-y", "hidden");
    }
    });
    //end action
    });
    });
    });
    var parentElement = jQuery(".handheld-navigation")[0]; //listen inside this target
    obs.observe(parentElement, {childList: true, subtree: true});

    });
    </script>

    Hope that helps someone and actually I hope to see it in a future version of the plugin!

  • The topic ‘Fix for long sub-menu overflow-y issue in handheld-menu’ is closed to new replies.