Mobile menu breakpoint in Magento 2

The question:

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

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

You have to replace style in webcsssource _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.

Method 2

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


First create the folder structure in your theme ex:


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

And copy css from mobile and write specific brakpoint

Method 3

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


<?xml version="1.0"?>
<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <css src="css/styles-l.css" media="screen and (min-width: 960px)"/>

For more info see:

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment