cancel
Showing results for 
Search instead for 
Did you mean: 

How to change the default 768px break point to toggle the mobile (compact) menu ?

SOLVED

How to change the default 768px break point to toggle the mobile (compact) menu ?

I've tried modifying and overriding the lib/web/mage/menu.js file whith my own file (which loads fine) in my custom theme with no success (using requirejs-config.js as stated in the documentation)...

1 ACCEPTED SOLUTION

Accepted Solutions

Re: How to change the default 768px break point to toggle the mobile (compact) menu ?

So, I managed to solve the problem but it's no easy task. I thought it would involve various javascript files but it's only about less/css. The doc mentions some menu.js file that is supposed to take care of the mobile menu switch but modifying it has no effect.

 

First step was to find the _navigation.less file from theme-frontend-blank and copy it in my main module (located in app/design/frontend) in web/css/source. I then switched to standard media query declarations to change the standard 768px break point :

 

@Media screen and (max-width: 1130px) { ... }
 
The mobile menu switches now at 1130px. Then it's a lot of css tweaking to get things back in order.

The second step is getting the search button/input to switch to mobile at the given break point. The file doing this is the _module.less from Magento_CatalogSearch module. Same as before, simple meda queries set at 1130px do the job.

Speaking of the "search",  the operation also involved duplicating the block search for design purposes. An operation easily done, without forgetting to duplicate the template form.mini.phtml and its js form-mini.js (and changing ids).

That's it !

View solution in original post

1 REPLY 1

Re: How to change the default 768px break point to toggle the mobile (compact) menu ?

So, I managed to solve the problem but it's no easy task. I thought it would involve various javascript files but it's only about less/css. The doc mentions some menu.js file that is supposed to take care of the mobile menu switch but modifying it has no effect.

 

First step was to find the _navigation.less file from theme-frontend-blank and copy it in my main module (located in app/design/frontend) in web/css/source. I then switched to standard media query declarations to change the standard 768px break point :

 

@Media screen and (max-width: 1130px) { ... }
 
The mobile menu switches now at 1130px. Then it's a lot of css tweaking to get things back in order.

The second step is getting the search button/input to switch to mobile at the given break point. The file doing this is the _module.less from Magento_CatalogSearch module. Same as before, simple meda queries set at 1130px do the job.

Speaking of the "search",  the operation also involved duplicating the block search for design purposes. An operation easily done, without forgetting to duplicate the template form.mini.phtml and its js form-mini.js (and changing ids).

That's it !