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

Tags:

Menu

Magento2

Recent Posts