Override menu.js file into your theme file,
Replace function with below inside menu.js file
_toggleMobileMode() and _toggleDesktopMode()
Replace with below code
_toggleMobileMode: function () {
$(this.element).off('mouseenter mouseleave');
this._on({
"click .ui-menu-item:has(a)": function (event) {
event.preventDefault();
var target = $(event.target).closest(".ui-menu-item");
if (!target.hasClass('level-top') || !target.has(".ui-menu").length) {
window.location.href = target.find('> a').attr('href');
}
},
"click .ui-menu-item:has(.ui-state-active)": function (event) {
this.collapseAll(event, true);
}
});
var 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 ') + 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));
},
_toggleDesktopMode: function () {
this._on({
// Prevent focus from sticking to links inside menu after clicking
// them (focus should always stay on UL during navigation).
"mousedown .ui-menu-item > a": function (event) {
event.preventDefault();
},
"click .ui-state-disabled > a": function (event) {
event.preventDefault();
},
"click .ui-menu-item:has(a)": function (event) {
var target = $(event.target).closest(".ui-menu-item");
if (!this.mouseHandled && target.not(".ui-state-disabled").length) {
this.select(event);
// Only set the mouseHandled flag if the event will bubble, see #9469.
if (!event.isPropagationStopped()) {
this.mouseHandled = true;
}
// Open submenu on click
if (target.has(".ui-menu").length) {
this.expand(event);
} else if (!this.element.is(":focus") && $(this.document[0].activeElement).closest(".ui-menu").length) {
// Redirect focus to the menu
this.element.trigger("focus", [true]);
// If the active item is on the top level, let it stay active.
// Otherwise, blur the active item since it is no longer visible.
if (this.active && this.active.parents(".ui-menu").length === 1) {
clearTimeout(this.timer);
}
}
}
},
"mouseenter .ui-menu-item": function (event) {
var target = $(event.currentTarget),
ulElement,
ulElementWidth,
width,
targetPageX,
rightBound;
if (target.has('ul')) {
ulElement = target.find('ul');
ulElementWidth = target.find('ul').outerWidth(true);
width = target.outerWidth() * 2;
targetPageX = target.offset().left;
rightBound = $(window).width();
if ((ulElementWidth + width + targetPageX) > rightBound) {
ulElement.addClass('submenu-reverse');
}
if ((targetPageX - ulElementWidth) < 0) {
ulElement.removeClass('submenu-reverse');
}
}
// Remove ui-state-active class from siblings of the newly focused menu item
// to avoid a jump caused by adjacent elements both having a class with a border
target.siblings().children(".ui-state-active").removeClass("ui-state-active");
this.focus(event, target);
},
"mouseleave": function (event) {
this.collapseAll(event, true);
},
"mouseleave .ui-menu": "collapseAll"
});
var categoryParent = this.element.find('.all-category'),
html = $('html');
categoryParent.remove();
if (html.hasClass('nav-open')) {
html.removeClass('nav-open');
setTimeout(function () {
html.removeClass('nav-before-open');
}, 300);
}
},
_delay: function(handler, delay) {
var instance = this,
handlerProxy = function () {
return (typeof handler === "string" ? instance[handler] : handler)
.apply(instance, arguments);
};
return setTimeout(handlerProxy, delay || 0);
},
expand: function( event ) {
var newItem = this.active &&
this.active
.children( ".ui-menu " )
.children( ".ui-menu-item" )
.first();
if ( newItem && newItem.length ) {
if (newItem.closest( ".ui-menu" ).is( ":visible" )
&& newItem.closest( ".ui-menu" ).has( ".all-categories" )
) {
return;
}
this._open( newItem.parent() );
// Delay so Firefox will not hide activedescendant change in expanding submenu from AT
this._delay(function() {
this.focus( event, newItem );
});
}
},
select: function( event ) {
this.active = this.active || $( event.target ).closest( ".ui-menu-item" );
if (this.active.is( ".all-category" )) {
this.active = $( event.target ).closest( ".ui-menu-item" );
}
var ui = { item: this.active };
if ( !this.active.has( ".ui-menu" ).length ) {
this.collapseAll( event, true );
}
this._trigger( "select", event, ui );
}
});