How to change the screen resolution bound (768px) when the main menu switches to the mobile mode?

Sandeep_Pandey · June 21, 2016, 7:58am

Hi,

I want to set the breaking point of top menu to 800px instead of 768px, can any one help me?

dmitry_fedyuk · June 26, 2016, 5:21pm

Please make a screenshot to illustrate the “breaking point” term. I do not understand what is this.

Sandeep_Pandey · June 28, 2016, 6:59am

In magento the menus are changed to mobile menu after 768px, so i want to know to change the menu breaking point i.e when they changed to mobile menu, make sense ?

dmitry_fedyuk · June 28, 2016, 7:07am

It is set here:

github.com

magento/magento2/blob/2.1.0/lib/web/css/source/lib/variables/_responsive.less

// /**
//  * Copyright © 2016 Magento. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Responsive variables
//  _____________________________________________

@use-flex: true; // Use flexbox [true|false]
@responsive: true; // Theme is responsive [true|false]

@screen__xxs: 320px;
@screen__xs: 480px;
@screen__s: 640px;
@screen__m: 768px;
@screen__l: 1024px;
@screen__xl: 1440px;

You can override this Less variable in your own theme or module.