Magento – Magento 2 – 3rd level menu items collapsed on mobile devices

You can use following code in your CSS for displaying menu in your mobile device

@media only screen and (max-width: 767px) {
    body.cms-my-homepage div.main-menu.menu-style-2{display:block}
}

1) Create mixin for mage/menu

2) rewrite function _toggleMobileMode

3) add 3 lines to the 'click .ui-menu-item:has(a)' method

this.active = null;
this.select(event);
this.expand(event)

4) It works

full code of mixin:

define([
    'jquery',
    'jquery/ui'
], function($) {
    "use strict";

    return function (widget) {
        $.widget('mage.menu', widget.menu, {
            _toggleMobileMode: function () {
                var subMenus;

                $(this.element).off('mouseenter mouseleave');
                this._on({

                    /**
                     * @param {jQuery.Event} event
                     */
                    'click .ui-menu-item:has(a)': function (event) {
                        var target;

                        event.preventDefault();
                        target = $(event.target).closest('.ui-menu-item');
                        target.get(0).scrollIntoView();

                        if (!target.hasClass('level-top') || !target.has('.ui-menu').length) {
                            window.location.href = target.find('> a').attr('href');
                        }

                        this.active = null;
                        this.select(event);
                        this.expand(event)
                    },

                    /**
                     * @param {jQuery.Event} event
                     */
                    'click .ui-menu-item:has(.ui-state-active)': function (event) {
                        this.collapseAll(event, false);
                    }
                });

                subMenus = this.element.find('.level-top');
                $.each(subMenus, $.proxy(function (index, item) {
                    var category = $(item).find('> a span').not('.ui-menu-icon').text(),
                        categoryUrl = $(item).find('> a').attr('href'),
                        menu = $(item).find('> .ui-menu');

                    this.categoryLink = $('<a>')
                        .attr('href', categoryUrl)
                        .text($.mage.__('All %1').replace('%1', category));

                    this.categoryParent = $('<li>')
                        .addClass('ui-menu-item all-category')
                        .html(this.categoryLink);

                    if (menu.find('.all-category').length === 0) {
                        menu.prepend(this.categoryParent);
                    }

                }, this));
            },
        });

        return $.mage.menu;
    }
});