0

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

1
  • @RakeshDonga your code where should I put ? Feb 7, 2021 at 5:49

1 Answer 1

2
+100

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)'
3
  • thanks for your input,let me check with your code Feb 8, 2021 at 14:12
  • @NirajPatel Solved ? Feb 9, 2021 at 12:56
  • 1
    Thanks I accepted answer Feb 9, 2021 at 14:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.