Change what screen width triggers the hamburger menu in web

I'm currently working on making a custom menu when the hamburger menu appears on web. Currently, the screen shows the menu icon when the window width is under 1024px.

I want to change the trigger for the hamburger menu to run when the window width is 1200px instead of 1024px.

Since i assume you can't edit the base CSS file, i was wondering if there is any way to achieve this?

Thanks!

Hi Brandon,

The while idea of CSS is that it is cascading (hence the "C"), i.e. you can easily override any base CSS in your theme's custom CSS.

I understand overriding CSS, but perhaps you can help me understand how exactly the hamburger functionality works within outsystems. I can see that the 'Application_Menu OSInline' nav element gets a '::before' added when the screen goes under 1024px width. Does the '::before' move the nav off the screen, and the hamburger trigger animates it back onto the screen, or does it work in another way?


I'm just trying to wrap my head around it so i can customize it to my needs.


Thanks!


EDIT - It seems that outsystems is adding the tablet class to the body element on resize. Is there any way to customize when it adds the tablet class, therefore controlling at what width the hamburger icon appears?


Thanks!

Solution

Found the solution!

There is a device configuration property on layoutmenutop that lets you set the width.

Thanks for your help anyhow!

Solution