Make sidebar collapsed by default through CSS?

[Jarvis]

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?

[Himaladin]

What about the tooltip when user hover the sidebar?

[Jarvis]

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

[Himaladin]

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.

[Jarvis]

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

[Himaladin]

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

[Jarvis]

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