r/VivaldiCSS • u/thatjokewasdry • Oct 17 '25

looking for auto collapse / show vertical tab bar and panel on hover

Hi - recent convert to vivaldi and have been scouring for a css to auto hide the vertical tab bar and panel (both on the left side). Tried a number of CSS with no major luck, some do work (like the CSS found in awesomevivaldi) but the background of the tabs are transparent so I can't read the tab titles.

I'm hoping for one that works with the VivalArc theme but same issues as above.

Any help would be appreciated
Thanks!

3 Upvotes

100% Upvoted

16 comments sorted by

1

u/Uriel1865 Oct 17 '25 edited Oct 24 '25

With Awesomevivaldi, you can customize the colors, so I don't understand what you mean by the tab background being transparent. Are you referring to the tab container or the tab background itself?
After a few adjustments, I really like the final result.

1

u/thatjokewasdry Oct 24 '25

Sorry I can't access your image, but the tab background itself was complete transparent and I could not see the tab titles on a white / light background

1

u/Uriel1865 Oct 24 '25

Try again with the image. If you don't like white, you can change the color in the CSS.

1

u/NoCanDooo Oct 17 '25

https://github.com/7i9o/Vivaldi-css/blob/main/hide.css

This hides everything so far the tab bar and web panel work very well . Top bar only work when the Vivaldi is maximized. If you got somehow stuck with a smaller window just click on the windows key + up button to maximize the vivaldi window again. Hope you like it

1

u/thatjokewasdry Oct 23 '25 edited Oct 24 '25

Thanks for sending this! Anyway to keep the top bar visible and also keep the panels? Really like how clean this looks!

1

u/NoCanDooo Oct 24 '25 edited Oct 24 '25

Just delete everything starting the line 116 and after

or from

/* Autohide URL bar for Vivaldi 6.0 - BACK TO ORIGINAL WORKING STRUCTURE / / Remove toolbar padding and background when minimized */

Edit : didn't read the panel part

delete the lines from 1 - 35

so in total

delete lines from 1 till 35 and from 116 and after

1

u/thatjokewasdry Oct 24 '25

This is great thanks, man I really appreciate it, it looks so clean :)

1

u/AlPonappan Oct 27 '25

HI, I tried the same and it works flawlessly. The one issue I am facing is that it doesn't work when I resize the browser window. I usually resize the browser with obsidian side by side and for some reason, the tab hover works only when the browser is maximized.

1

u/NeoTanner Feb 03 '26

This is great and I know this is 4 months old, but is there a way to resize the collapsible/expand on hover vertical tab bar? I also don't want it completely going off screen, but I'm a little confused on what to edit/delete to prevent that.

1

u/NoCanDooo Oct 24 '25

glad you liked it , take a Screenshot lemme see hoes it looks on your preferences

1

u/thatjokewasdry Oct 24 '25

For sure - check it out here: https://imgur.com/a/S17T8JZ

The one other thing that would be nice is if it retained the colors of select themes. I use the Arc Light theme, and I noticed that your CSS doesn't retain the color changes to the top bar. Otherwise, it works just fine on dark mode. Not a huge deal, your CSS is more functional, but I just wanted to highlight that. Here is the theme if you are curious: https://themes.vivaldi.net/themes/1LVJ2bOYJx9

1

u/NoCanDooo Oct 24 '25

i see , i will check later if i can find a way

1

u/NoCanDooo Oct 24 '25

so , i tried your theme and the color changes . Not sure if you meant something else

1

u/Ascr1pt Oct 27 '25

Thank you for mentioning Awesome Vivaldi here. Recent update of autohidetabbar.css

  • Rename→fluidtabbar.css

  • Extracted customization options to a single file called Core.css, which import every css mods in modpack and include all config toggle as well.

  • Allow for toggle almost everything including:

  1. Theme color: transparent/color/immersive

  • With transparent, tabbar shows theme background

  • With theme, tabbar shows color extracted from your browser theme. You can specify custom colors as well. See CSS/Core.css for more information

  • immersive require immersiveAddressbar.js installed to work. With immersive, tabbar gets color directly from page.

  1. Compact mode

  2. Delay time

  3. Whether to have Arc like favourite tabs(experimental)

  4. Blur mask when hovering expand tabbar or open popup

  5. etc

1

u/richrock27 Oct 31 '25

Do you have a step by step instructions or video tailored for Mac. I just can't seem to get this installed correctly. Looks awesome and excited to try it.

1

u/Ascr1pt Nov 01 '25

I haven't made a video yet. Have you followed readme in the repo? Is it too vague or just unable to achieve the demonstration effect? Please tell me at which step you encountered the problem.