3

How do you change the breakpoint at which mobile menu appears in Magento 2?

3

You have to replace style in web\css\source _navigation.less in your custom theme.

For Desktop

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

to (your custom width)

@media only screen and (min-width: 1024px) {

And for Mobile

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

to (your custom width)

 @media only screen and (max-width: 1023px) {

Remember one thing you have to add max-width is -1 from min-width.

| improve this answer | |
6

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)'

to

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

And copy css from mobile and write specific brakpoint

| improve this answer | |
  • not working, Can you please share proper way – Divyesh Jan 9 at 15:11
  • Copy menu.js file from lib/web/mage/menu.js and paste into your frontend theme like Frontend/Theme/Themename/web/mage/menu.js – MHK Developer Jan 9 at 20:00
  • Then search text "mediaBreakntpoi" into your theme menu.js file. – MHK Developer Jan 9 at 20:02
  • you can find something like mediaBreakpoint: '(max-width: 768px)' – MHK Developer Jan 9 at 20:02
  • just replace whatever width you want to set for mobile view breakpoint like: mediaBreakpoint: '(max-width: 1025px)' – MHK Developer Jan 9 at 20:03
2

Another approach is to overide the value in your theme of the @screen__m LESS variable. But this will not only change the mobile breakpoint for the navigation, it will change the mobile breakpoint everywhere.

Add to your theme's _extend.less

@screen__m: 960px;

Also, for best performace results you should add the following file to your theme

Magento_Theme/layout/default_head_blocks.xml

<?xml version="1.0"?>
<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: 960px)"/>
    </head>
</page>

For more info see:
https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/responsive-web-design/rwd_css.html

| improve this answer | |
  • This feels like the best, easiest and correct way to do this. – Paul Blundell Jan 30 at 10:51

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.