Make sidebar collapsed by default through CSS? part 2

Ask for Help
1

Hello @Himaladin , I couldn’t reopen the earlier thread which you solved, 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
image1308×553 43.9 KB

After:

image
image1309×558 43.3 KB

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

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:

/*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;
}
2

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

/*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. :smile:

3

This worked perfectly! Much thanks!

4

@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.

5

Strange… On mine, tooltips can still appear.

6

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. :sweat_smile: