Mobile Navigation Menu animation


I want to change the Side Navigation style as Sidenav Push Content. ( example : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push )./



https://codepen.io/made-on-mars/pen/qqEgXP


How can I edit the Css on outsystems ? 



In menu webblock in commons screen you have css in up right corner of design view. This will overright the existing css. 

or if you need you can add inline css for element, click on element and add style in attribute

Hi Wilson,

Use java script after menu show and menu hide client action

var element = document.getElementsByClassName("main-content")[0];
  element.classList.toggle("contentPush");


SyntaxEditor Code Snippet

.contentPush{
left:60%;
transition: margin-left .5s;
}

.app-menu{
width: 100% !important;
transition: margin-left .5s;
}

SyntaxEditor Code Snippet

.main-content {
    position: relative !important;
}
put that css in application theme.