Hey Alfio,

I know OutSystems UI components/widgets are already responsive: https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Look_and_Feel/Responsive_UI

Also the layouts should provide responsive menus.

Regards,

Bogdan

Hi,

In OutSystems Reactive, menu structure from your example codepen is quite easy to replicate with something as shown below, but as usual, there's some OutSystems generatedwrapper div and original CSS needs to be modified a bit.

With this structure, quick fix seemed to be removing all '>' chars from example CSS between ul and li ('nav > ul > li' becomes 'nav > ul li') and add .horizontal--menu class definition in front of all example CSS definitions for extra measure. 

Biggest headache for you to getting this to work is probably replicating that javascript function used to calculate menu width and moving list items around using only vanilla JS, as your example seems to use jQuery syntax. You should get started by using document.querySelector and offsetWidth, along with basic list iteration and element classList manipulation.

Hope this helps!

Thanks a lot Mikko for thinking along. This is a very good starting point. Like you said, getting the javascript part to work will be a challenge. Gonna start on that as soon as I can.