Valo theme: apply responsive mode

Hi all,
I use in my app the sub-themes of Valo (blueprint , flat , light… ) and i need to apply responsive mode with a custom width-range (0-1500 and 1501- ) not the default one (0-800,801-).

Where can I edit the width-range ?


Currently the width-ranges are pretty much hard-coded in
. You can override the valo-menu-responsive mixin by copy-paste, but there really should be variables for those ranges instead.

Actually, there seems to be a variety of widths hardcoded in _valo-menu.scss. For example, 1100px is a breakpoint after which for some reason small icons are used instead of the large icons. 500px seems to be a breakpoint where button labels are omitted.

I am trying to figure out how to use valo-menu because I really like how it works in responsive mode, and I’m looking at the implementation in quicktickets-dashboard for ideas, but I’m having real difficulty making it work.

Jouni, can you please provide an example of how I can override the valo-menu-responsive mixin or can point me to information how to go about overriding built in mixins in general?

I don’t want the 1100px breakpoint in my application (just need 0-800 and 801-…) and I think the only way to override the default behavior is by overriding the mixin as you suggested. But I’m not sure where to place my override code and how to make the compiler replace it over the default mixin.

Im using valo theme but I cant get the responsive thing…
Hope this information could help me… thanks for this…