# Dashboard CSS tweaks for Side Navigation

**URL:** <https://discourse.nodered.org/t/dashboard-css-tweaks-for-side-navigation/82915>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [16 November 2023 10:21 UTC](https://discourse.nodered.org/t/dashboard-css-tweaks-for-side-navigation/82915 "2023-11-16T10:21:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![akd02](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@akd02](https://discourse.nodered.org/u/akd02)\
**Post date:** [16 November 2023 10:21 UTC](https://discourse.nodered.org/t/dashboard-css-tweaks-for-side-navigation/82915/1 "2023-11-16T10:21:56Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/8/f8464e64dde156f99c70d4799d935cae0fba3cb3.png)  
 ![To](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/c/ac4c92b87d0827f086910c76aae268daae9d65c5.png)

[CSS-SideNavigation.json](https://discourse.nodered.org/uploads/short-url/iPpADvZw6P0Z7rwmo3VxxJBHt1m.json) (1.1 KB)

```auto
<style>

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

</style>

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [16 November 2023 12:53 UTC](https://discourse.nodered.org/t/dashboard-css-tweaks-for-side-navigation/82915/2 "2023-11-16T12:53:58Z")

</div>

```auto
@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;
        }
    }

```

---

<div class="post-metadata">

**Author:** ![akd02](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@akd02](https://discourse.nodered.org/u/akd02)\
**Post date:** [16 November 2023 13:04 UTC](https://discourse.nodered.org/t/dashboard-css-tweaks-for-side-navigation/82915/3 "2023-11-16T13:04:33Z")

</div>

You are a STAR!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [30 November 2023 13:05 UTC](https://discourse.nodered.org/t/dashboard-css-tweaks-for-side-navigation/82915/4 "2023-11-30T13:05:11Z")

</div>

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