# Change sidebar navigation drawer width

**URL:** <https://discourse.nodered.org/t/change-sidebar-navigation-drawer-width/97395>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [3 June 2025 10:12 UTC](https://discourse.nodered.org/t/change-sidebar-navigation-drawer-width/97395 "2025-06-03T10:12:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![amhaziq](https://avatars.discourse-cdn.com/v4/letter/a/eb8c5e/32.png) [@amhaziq](https://discourse.nodered.org/u/amhaziq)\
**Post date:** [3 June 2025 10:12 UTC](https://discourse.nodered.org/t/change-sidebar-navigation-drawer-width/97395/1 "2025-06-03T10:12:22Z")

</div>

I can change sidebar width using below code

```auto
.v-navigation-drawer {
  width: 60px !important;
}

```

But width also affect sidebar expanded width. I want to change the width of navigation drawer during collapsed only.

---

<div class="post-metadata">

**Author:** ![amhaziq](https://avatars.discourse-cdn.com/v4/letter/a/eb8c5e/32.png) [@amhaziq](https://discourse.nodered.org/u/amhaziq)\
**Post date:** [3 June 2025 10:48 UTC](https://discourse.nodered.org/t/change-sidebar-navigation-drawer-width/97395/2 "2025-06-03T10:48:26Z")

</div>

Okay. I found the solution when inspect mode.

```auto
.v-navigation-drawer.v-navigation-drawer--rail {
  width: 60px !important;
}

```

---

<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:** [17 June 2025 10:49 UTC](https://discourse.nodered.org/t/change-sidebar-navigation-drawer-width/97395/3 "2025-06-17T10:49:24Z")

</div>

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