where to change responsive media breakpoint 767px in magento 2

magento.stackexchange https://magento.stackexchange.com/questions/322439

Question

I am working on responsive navigation menu in magento 2.4 version. When I set width 768px in a browser it changes layout to desktop view. So I wanna keep this responsive menu design till 1024px which and where I have to change the code to achieve this ? I changed the code from 767px to 1024px in lib\web\mage\menu.js and pub\static\frontend\Magento\luma\en_US\mage\menu.js line number 25

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

but nothing happened. So where I have to change the code to make responsive menu till width 1024px

Was it helpful?

Solution

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)'
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top