4

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

Improve this question
1

3 Answers 3

Reset to default
5

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
7
  • This doesn't work. Tested in Magento 2.2.7.
    – Cypher909
    Commented Feb 5, 2019 at 16:41
  • This is the correct way: magento.stackexchange.com/questions/131476/…
    – Cypher909
    Commented Feb 5, 2019 at 17:23
  • @cycpher909 yes It's not working for me to. I have show toggle menu in 768 to 1024 to. Can you please help me?
    – Magecode
    Commented Jul 18, 2019 at 12:15
  • Any help to solve mobile menu error magento.stackexchange.com/questions/328503/…
    – zus
    Commented Jan 1, 2021 at 12:25
  • For my clarity, just copy from vendor\magento\theme-frontend-blank\web\css\source\ _navigation.less and put into my custom theme app\design\frontend\zero_theme\theme\web\css\source\ _navigation.less right?
    – zus
    Commented Jan 11, 2021 at 13:46
7

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
9
  • not working, Can you please share proper way
    – Divyesh
    Commented Jan 9, 2020 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
    Commented Jan 9, 2020 at 20:00
  • Then search text "mediaBreakntpoi" into your theme menu.js file.
    – MHK Developer
    Commented Jan 9, 2020 at 20:02
  • you can find something like mediaBreakpoint: '(max-width: 768px)'
    – MHK Developer
    Commented Jan 9, 2020 at 20:02
  • just replace whatever width you want to set for mobile view breakpoint like: mediaBreakpoint: '(max-width: 1025px)'
    – MHK Developer
    Commented Jan 9, 2020 at 20:03
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

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
1
  • This feels like the best, easiest and correct way to do this.
    – Paul Blundell
    Commented Jan 30, 2020 at 10:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.