# Make sidebar collapsed by default through CSS?

**URL:** <https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css/74681>\
**Category:** Ask for Help\
**Created:** [July 7, 2024, 6:15pm UTC](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css/74681 "2024-07-07T18:15:53Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [July 7, 2024, 6:15pm UTC](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css/74681/1 "2024-07-07T18:15:53Z")

</div>

Hi, I wanted to know two things related to the navigation sidebar?

- is it possible to make the sidebar collapsed by default? In one app I don’t have that many buttons, and I like how the sidebar looks after it’s collapsed over the top bar. Also during my testing I found out that my app’s users use whatever the default state of the sidebar is - meaning they leave it fully open - which takes up a lot of screen real estate. As a result I have to remind them to close the sidebar to view a lot of the table’s columns in the page properly.

1. So I was wondering if I could skip all that trouble and just make it so that the sidebar is collapsed by default?

2. Or, if not, then is there any CSS trick I could use to change the sidebar width?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [July 7, 2024, 7:57pm UTC](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css/74681/2 "2024-07-07T19:57:28Z")

</div>

What about the tooltip when user hover the sidebar?

![Screenshot 2024-07-08 at 03.00.29](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/f/5fc1c61718a13ff388259e1187792892af39e695.png)

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [July 7, 2024, 9:39pm UTC](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css/74681/3 "2024-07-07T21:39:02Z")

</div>

Yeah that’s there, and I use it all the time, but my users for some reason don’t use it. I was hoping to make it closed by default (instead of open by default).

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [July 8, 2024, 12:41am UTC](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css/74681/4 "2024-07-08T00:41:36Z")

</div>

The tooltip shown above is a custom one that appears when hovering over a sidebar field. This is different from the original tooltip, which only appears when hovering over the button. I don’t have any other ideas unless you want to collapse the sidebar permanently.

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [July 8, 2024, 12:48am UTC](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css/74681/5 "2024-07-08T00:48:17Z")

</div>

Hmmm OK. I’ll try to make the sidebar thinner first.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [July 8, 2024, 1:17am UTC](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css/74681/6 "2024-07-08T01:17:07Z")

</div>

```auto
/*Collapse Sidebar Permanently*/
.has-tab-bar > div:nth-child(2) > div:nth-child(2) {
width: 68px !important;
}
.has-tab-bar > div:nth-child(2) > div:nth-child(1) {
display: none;
}

```

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [July 8, 2024, 1:26am UTC](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css/74681/7 "2024-07-08T01:26:34Z")

</div>

Oh wow! Thank you so much. This works perfectly.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [July 15, 2024, 1:26am UTC](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css/74681/8 "2024-07-15T01:26:57Z")

</div>

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