Dashboard CSS tweaks for Side Navigation

Dashboard
1

Hello community,

I would like to use UI_Template to make some customize the default behavior of the side navigation in Dashboards.

I managed to find the style that allowed me to tweak the font size in the side navigation, however I was not able to make the all the changes needed.

The needed changes are:

  • Change the vertical line on a selected tab from appearing on the right to appear on the left
  • Change the color of the vertical bar on the selected dashboard tab
  • Change the color of the font & icon for the selected dashboard tab
  • Change the height, width & padding between dashboard tab items on the side navigation

Any help / tips on what needs to be added / changed in my UI_Template CSS style block to make those changes?

attached is my UI_Template node with the style block
attached are pictures "From.png -> To.png" to visualize the changes i would like to achive.

From
To

CSS-SideNavigation.json (1.1 KB)

<style>

@media(min-width: 960px) {
    .md-sidenav-left, md-sidenav {
    top: 64px;
    z-index: 80;
    font-size:10px;
}    

</style>
2 
@media(min-width: 960px) {
        .md-sidenav-left, md-sidenav {
            top: 64px;
            z-index: 80;
            font-size:10px;
            max-width:120px !important;
        }
        .nr-menu-item-active div button {
            border-left: 4px solid red;
            border-right: unset;
        }
        .nr-menu-item-active div.md-list-item-inner{
            color:red !important;
        }
        md-list-item {
            min-height: 36px;
            height: 36px;
        }
    }
2 Likes
3

You are a STAR!

4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.