Make sidebar collapsed by default through CSS?

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?

What about the tooltip when user hover the sidebar?

Screenshot 2024-07-08 at 03.00.29

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

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.

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

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

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

1 Like

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