Magento 2 – Make Mobile Menu Appear Sooner

magento2

The mobile menu appears at 768px and I want to change that to a custom value.

I've read on here to do the following:

The JS for the menu that has that functionality can be found in

lib/web/mage/menu.js

First create the folder structure in your theme ex:

[Namespace]/[theme_name]/web/mage/

And copy menu.js from lib/web/mage/menu.js to [Namespace]/[theme_name]/web/mage/menu.js

And change

 mediaBreakpoint: '(max-width: 768px)'

mediaBreakpoint: '(max-width: 1025px)'

But this isn't working, can anyone help please?

Best Answer

Override

/vendor/magento/theme-frontend-blank/web/js/navigation-menu.js

in your theme

/app/design/frontend/Vendor/YourTheme/web/js/navigation-menu.js

Change in line No. 400

media: '(min-width: 768px)',

media: '(min-width: 1024px)',

Override

/vendor/magento/theme-frontend-blank/web/css/source/_navigation.less

in your theme

/app/design/frontend/Vendor/YourTheme/web/css/source/_navigation.less

Change in line No. 51

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {

& when (@media-target = 'mobile'), (@media-target = 'all') {
@media all and (max-width: (@screen__l)) {
    // Your code here
}
}

Change in line No. 275

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

& when (@media-target = 'desktop'), (@media-target = 'all') {
@media all and (min-width: (@screen__l)) {
    // Your code here
}
}

Related Solutions

Magento – Customising the Magento 2 main navigation (topmenu) javaScript

If you want to override the navigation-menu.js you need to add it in your theme:

app/design/frontend/{yourVendorName}/{yourThemeName}/web/js/navigation-menu.js

After that you need to run:

php bin/magento setup:static-content:deploy

and clear the cache, just to be sure.

I hope this helps!

Magento 2 – Megamenu Issue: Clicking Menu Opens Category Page on Mobile

Please update your menu.js file as:

_toggleMobileMode: function () {
            $(this.element).off('mouseenter mouseleave');
            this._on({
                "click a.ui-corner-all": 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));
        }

Best Answer

Related Solutions

Magento – Customising the Magento 2 main navigation (topmenu) javaScript

Magento 2 – Megamenu Issue: Clicking Menu Opens Category Page on Mobile

Related Topic