# Make sidebar collapsed by default through CSS? part 2

**URL:** <https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css-part-2/75434>\
**Category:** Ask for Help\
**Tags:** custom-css\
**Created:** [August 5, 2024, 12:25pm UTC](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css-part-2/75434 "2024-08-05T12:25:41Z")\
**Posts on this page:** 7\
**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:** [August 5, 2024, 12:25pm UTC](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css-part-2/75434/1 "2024-08-05T12:25:41Z")

</div>

Hello @Himaladin , I couldn’t reopen the [earlier thread which you solved](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css/74681), so I created a new topic.

The code you gave works perfectly, except in one instance, whenever I open a slide-in details screen, the nav bar expands to its original width. This only happens if the nav bar is expanded by default, so it doesn’t happen if the sidebar’s “collapse” was set to collapse.

Sharing screenshots of before and after opening a slide-in detail screen:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/b/5bb71baf4dec7f914367398b7800054cb05eeeda.png)

After:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/9/59016c6ec9e51af6012d604e365c83f1cb0a64b5.png)

For the detail slider, I also used a custom CSS from this thread:

> [@Making the Detail Slider Wider](https://community.glideapps.com/t/making-the-detail-slider-wider/63760):
>
> The current slider for details is too small a width. Is there a way to add Code in to widen it?

Resharing the CSS for the side bar and the slide-in, for troubleshooting convenience. It would be highly appreciated if you could lend a sneak peek to let me know what I’m doing wrong:

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

/*Slide-in width*/
div[class*="slide-in-content___StyledMDiv3"] {
width: 75% !important;
}

```

---

<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:** [August 5, 2024, 2:06pm UTC](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css-part-2/75434/2 "2024-08-05T14:06:05Z")

</div>

Try using this code instead. It might be more effective since it uses the `:has` pseudo-class to target where “nav” is located.

```auto
/*Collapse Sidebar Permanently*/
#page-root div:nth-child(2) > div:has(nav) {
  width: 68px !important;
}
#page-root .toggle-sidebar {
  display: none !important;
}

```

Thank you for your description; it is very clear. 😄

---

<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:** [August 5, 2024, 4:17pm UTC](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css-part-2/75434/3 "2024-08-05T16:17:45Z")

</div>

This worked perfectly! Much thanks!

---

<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:** [August 5, 2024, 5:44pm UTC](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css-part-2/75434/4 "2024-08-05T17:44:28Z")

</div>

@Himaladin , I think this CSS has an unintended effect of hiding tooltips on the side-bar icons as well. Not a big deal for me, just wanted to keep you informed.

---

<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:** [August 5, 2024, 6:02pm UTC](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css-part-2/75434/5 "2024-08-05T18:02:26Z")

</div>

Strange… On mine, tooltips can still appear.

---

<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:** [August 5, 2024, 6:22pm UTC](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css-part-2/75434/6 "2024-08-05T18:22:56Z")

</div>

I just found one icon that doesn’t have tooltips. After disabling custom CSS, there are still no tooltips for that one icon. But I haven’t found the cause.

Hah… Only one bottom icon… This is a bug. 😅

---

<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:** [August 12, 2024, 6:23pm UTC](https://community.glideapps.com/t/make-sidebar-collapsed-by-default-through-css-part-2/75434/7 "2024-08-12T18:23:24Z")

</div>

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