How to change width where mainmenu becomes sidemenu

cemsdb

Our menu is collapsing into two horizontal planes (instead of just one) when the screen width is decreased (iPads, etc; between 992px and 1100 or so), way before the automatic change into the sidemenu (occurs 991px and below).

How does one change/increase the width where the mainmenu becomes a sidemenu?

saguaros

cemsdb Hi

What you mean by 'two horizontal planes'?

Kindly share screenshot highlighting the issue so I can check for you.

cemsdb

saguaros Hi Saguaros, what I mean is: instead of the menu being in one horizontal line, it collapses into two different horizontal lines.

Please take a look at the following image of the site viewed through an iPad:

I would like the menu to become a sidemenu (/sidebar) at a higher width.

saguaros

In this case, you will need to edit LESS file:

[your_site_root]/templates/ja_morgan/less/variables.less

Look for this line of code:

@grid-float-breakpoint:     @screen-md-min;

and change to:

@grid-float-breakpoint:     1024px;

the screen size smaller than 1024px will display menu button.

Remember to backup your site first and compile less to css: https://www.t3-framework.org/documentation/bs3-configuration#compile-less

cemsdb

saguaros Thank you, issue resolved!

PS, it's important to point out that one might also need to change this line of code (in the same file) to the same width as '@grid-float-breakpoint' (or 1px above):
@screen-md: 992px;