Magento2 How to change the mobile menu breakpoints from 767px to 1024px?

Question

I would like to display mobile menu for tablet or iPad, for testing I have changed the media breakpoints from 767px to 1024px directly in lib/web/mage/menu.js but it's not working. where I have to change to achieve it? I am working on Magento 2.3.5.

Answer 1

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.

And after you run command :-

php bin/magento s:up
php bin/magento s:s:d -f
php bin/magento c:c
php bin/magento c:f

And get more information :-

Mobile menu breakpoint in Magento 2

Hope this help

Thanks ...