4

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

1

3 Answers 3

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.

7
  • This doesn't work. Tested in Magento 2.2.7.
    – Cypher909
    Feb 5, 2019 at 16:41
  • This is the correct way: magento.stackexchange.com/questions/131476/…
    – Cypher909
    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
    Jul 18, 2019 at 12:15
  • Any help to solve mobile menu error magento.stackexchange.com/questions/328503/…
    – zus
    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
    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

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

1
  • This feels like the best, easiest and correct way to do this. Jan 30, 2020 at 10:51

Your Answer

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

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