Hi Tushar,

Atlas UI makes use of variables for a lot of coloring options, which are possible to override using the custom-variables.scss file which is located in the app styling folder by default.

In this case, you will be looking for the variable $sidebar-bg:

Try to take advantage of these built-in variable options before adding a custom style, as a custom style might break after updating the Mendix core modules!

HI Tushar Rajput,

Run your project and view the application in the Chrome browser. Inspect the page by right-clicking on the page and selecting the Inspect Option. Now you can just select the navigation tree and check the CSS class responsible. 

In your Mendix project, create a new UI resource module ( Do not Override the existing Styles), add a new SCSS file, and import it into the Main.SCSS file in the UI resource module. Add the class you have copied, and change the color. 

I hope it helps. ATB!!

Hi Tushar,

If you want to change navigation tree bar background-color use below code

.layout-atlas-responsive-default

.mx-scrollcontainer-shrink:not(.mx-scrollcontainer-open)

> .region-sidebar{

background-color: rgb(0, 255, 55) !important;

}

and if you want to change navigation bar item background-color use below code

.layout-atlas-responsive-default .region-sidebar

.mx-scrollcontainer-wrapper

.mx-navigationtree

.navbar-inner > ul > li > a {

background-color: red !important;

}

just go to web styling folder inside this main.scss & apply this