Hello all,


I'm currently building a website where I decided not to use the common layouts, but instead create my own.

The reason for this is because I wanted to have more freedom and space (for desktop view) and, as far as I know, the common layouts all are somewhat limited to this regard as the MainContent doesn't use all the space.

In desktop the website looks pretty nice now, but I'm struggling with the mobile view menu. Because I'm not using a common layout, the menu is not responsive and doesn't turn into a hamburger menu.


I simply cannot figure out how to make the menu responsive so it turns into a hamburger menu when viewed on a phone. I've looked through the css of the LiverpoolTheme / Patterns_Liverpool, as I figured this is probably where the Liverpool theme makes the Layout_Liverpool's menu responsive, however I cannot figure out which part exactly is the part that makes this happen.


Does anyone know which part of Liverpool makes the menu responsive (so it's a normal horizontal menu in desktop mode and a hamburger menu in mobile)?

Or could anyone help me out how to make the hamburger menu?


Thnx in advance,

Dennis

Hi Dennis,

The best to see how it is done, is to create an application using the SilkUI layout.

If you want to use the same method, you will need to include in your Layout the JavaScript include in every SilkUI layout, and will have to follow some guidelines regarding the placeholders and so on. 

But this will give you the ability to use the classes that the SilkUI add to the PAGE div that is included in every page, like tablet, desktop, phone, small, etc.

And than you can style your menu depending on those classes (that is how it is done).

The other way is to use a combination of media queries and identification of the device using the User Agent string, for example. (I do not recommend).

Cheers,
Eduardo Jauch

EDIT:
https://www.outsystems.com/forums/discussion/15228/custom-theme/