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