Collapse/hide side ribbon [SOLVED]

Resolved help
#1

Things I have tried

I tried this:

.side-dock-ribbon.is-collapsed:not(:hover){ width: 0px !important; opacity: 0 }
.side-dock-ribbon.mod-right.is-collapsed:not(:hover) ~ .workspace-split.mod-right-split { margin-right: 0 }
.side-dock-ribbon.mod-left.is-collapsed:not(:hover) ~ .workspace-split.mod-left-split { margin-left: 0 }

but it does not work.

What I’m trying to do

I don’t need the ribbon, so I would like to hide it. The code above worked in the distant past, but not anymore.

The only way I can hide it is with the Hider plug-in, but I don’t want to use that.

#2

@Klaas - It might be an issue of precedence. This works if I put it near the top of my stylesheet, but not when I put it in a snippet or at the bottom. I don’t have time to debug, but there’s something farther down that’s breaking it.

.workspace-ribbon.mod-left {width:0px;}

You could similarly add .mod-right to hide the other one, too.
If you want to reclaim the space it was occupying, include this:

.workspace-split.mod-left-split {margin-left: 0px;}
#3

@Erisred: many thanks !! For the left that works fine.
For the right it hides but does not reclaim the space, so I am left with a blank strip on the right.

I tried this 1st at the top of the theme’s style sheet, and that is what I found. Out of curiosity I tried it with a snippet, and it works exactly the same way !!
I am happy about that because I don’t like to make changes to a theme’s style sheet.

So, it’s just the right that looks a bit funny now.

#4

@Klaas - here’s the full snippet that will remove both:

 /* hide the left sidebar, and reclaim the space it was occupying */
.workspace-ribbon.mod-left {width:0px;}
.workspace-split.mod-left-split {margin-left: 0px;} 
/* hide the right sidebar, and reclaim the space it was occupying */
.workspace-ribbon.mod-right {width:0px;}
.workspace-split.mod-right-split {margin-right: 0px;}

Works here, hope that’s what you need!

#5

@Erisred: yes, that works. In fact, I made a stupid mistake: in your previous reply you stated:

You could similarly add .mod-right to hide the other one, too.

So, I added this:

.workspace-ribbon.mod-right {width:0px;}
.workspace-split.mod-right-split {margin-left: 0px;}

Notice that in the 2nd line I forgot to change margin-left to margin-right.

I apologize for this stupidity, and want to thank you for your help and your patience.
Thank you !! :clap:

1 Like
#6

You’re most welcome. Happy to be of help.

1 Like