Valo responsive width ranges

Flow
1

Hi,

Does anyone know if there is a way to change the width ranges that are used by the responsive menu in the Valo-theme? Currently it looks like the “full width” menu is shown if the viewport width is > 1100px, but I would like to change this to > 900px for my app

Regards,
Øyvind

2

Hi,

unfortunately there is currently no easy way to do this, although you should be able to change it by searrching for _valo-menu.scss in your Vaadin jar, and copy-pasting the entire

@mixin valo-menu-responsive { ... } to your own theme, and then changing the value on the line

@include width-range($min: 801px, $max: 1100px) {
3

Please add these 800 and 1100 px limits as global variables for us to tweak.

4

I agree, the width ranges should be variables; in a full-hd mobile phone, the menu is better hidden when in portrait mode.

5

I solved the width problem on mobile using @Viewport(“width=device-width, initial-scale=1”) .