1. The media attribute for the styles-l.css stylesheet
In the default_head_blocks.xml file of your theme change the breakpoint used for loading the styles-l.css stylesheet to 1024px.
app/design/frontend/[Theme namespace]/[theme name]/Magento_Theme/layout/default_head_blocks.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/styles-l.css" media="screen and (min-width: 1025px)"/>
</head>
</page>
2. The @screen__m LESS Breakpoint
You can change the value for @screen__m in your theme’s _variables.less.
Copy this file from your parent theme to your theme, if you haven’t done so already, and add:
app/design/frontend/[Theme namespace]/[theme name]/web/css/source/_variables.less
// Overriding values for core breakpoints
@screen__m: 1025px;
3. Breakpoint in menu.js
In your theme create a requirejs-config.js file.
app/design/frontend/[Theme namespace]/[theme name]/requirejs-config.js
var config = {
config: {
mixins: {
'mage/menu': {
'Magento_Theme/js/menu-media-breakpoint-mixin': true
}
}
}
};
Next add the JavaScript mixin file to change the breakpoint to 1024px.
app/design/frontend/[Theme namespace]/[theme name]/Magento_Theme/web/js/menu-media-breakpoint-mixin.js
define([], function () {
'use strict';
return function (widget) {
widget.menu.prototype.options.mediaBreakpoint = '(max-width: 1024px)';
return widget;
};
});
4. Breakpoint in responsive.js
Unfortunately for responsive.js, the file needs to be overridden rather than extended in the theme.
A JavaScript mixin won’t work as it is initialised in the deps block of the blank parent theme’s requirejs-config file rather than within the define parameters of a requirejs module, a data-mage-init attribute or the tag.
So copy
vendor/magento/theme-frontend-blank/Magento_Theme/web/js/responsive.js
(some times found in the vendor/ directory depending on how you installed Magento)
to your theme’s
app/design/frontend/[Theme namespace]/[theme name]/Magento_Theme/web/js/ directory.
And in this file change:
media: '(min-width: 768px)'
to
media: '(min-width: 1025px)'
