Navigation styling

Which classes do i need to edit in order to style the navigation in mendix? I created a completely new navigation list but i can’t change the colors (at least not the hover color)
2 answers

Hi Jannes,

You can change the navigation hover color of a sidebar as shown in the css below;

.region-sidebar .mx-navigationtree .navbar-inner>ul>li a:hover {
    color: #fff;
    background-color: #2d3642;


To change navigation styling please update navigationbar.scss / navigationtree.scss files according to your requirements.

You can find this in your project directory > theme\styles\web\sass\core\helpers. 

The best practice is that in project directory > theme\styles\web\sass\app you create same folder(s) structure that you see in theme\styles\web\sass\core and add the .scss file(s) which you want to update in these folder(s) respectively (e.g. if you want to update styles in navigatintree.scss than create helper folder in theme\styles\web\sass\app and create new scss file navigationtree.scss. Than update navigationtree styles according to you requirements.)

Note: Make sure you import you new .scss file(s) in _custom.scss (you can find _custom.scss in theme\styles\web\sass\app \_custom.scss. e.g. if you have added navigatintree.scss than add this line 

@import "helpers/navigatintree";



Hope this helps! 


They are all in <projectdir>\theme\styles\web\sass\app\_custom-variables.scss

And a couple of lines below that more detailed settings.

If you have created your own navigationbar, with own classes, I would advise to start again using AtlasUI's default navigationbar and modify that to your needs. Then you will have the best of both worlds: Modification via the sass-classes and full freedom to shape it in any way you want.

The hover color can be changed at line 281 "$navtopbar-color-hover:                 $brand-inverse;"

If you need other classes, if you are sure they are not already mentioned, then this file is the place to add a custom class and the styling.