Mobile menu breakpoint in Magento 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

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.

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: