Overlay panels

  • Are you the type of guy/girl who quickly opens panels to look something up and close it again right after? Then overlaying panels onto the page instead of displaying them next to it shifting your tab's content away probably makes sense for you. Here's the code for modding Vivaldi accordingly: B) [code] #main .inner { position: relative; } #panels-container { position: absolute; z-index: 1; top: 0; bottom: 0; background-color: var(--colorBg); } #panels-container.right { right: 0; } [/code] Simply drop it into a CSS file and use it as described in the introductory modding post. ;)

  • Hoping it was the right file (XD) I put in custom.css
    What exactly does? Enabling this, the sidebar (where are the notes) overlap with bookmark bar.

  • Whoops! Yes, I didn't compensate for the bookmarks bar as I don't use it. Thanks for pointing it out. I updated the script. ;)

  • The panel covers inner pages: bookmarks, extensions.

  • Sure it does. It's an overlay.

  • Can I exclude status bar area from the overlay? (it makes disappear some parts of the sidebar, I guess)

  • It doesn't cover the status bar in any way…?

  • yes, it covers, but I miss some parts of the sidebar in the bottom in that way (on bookmarks and notes page for example).
    Probably with status bar in overlay too or excluded from that, I won't notice that.
    I'm on 1.4 stable.
    (Bookmarks: overlay cover some text in the bottom)
    (Notes: overlay covers where the + button is)

  • The overlay (Vivaldi hooks way) on 1.5 looks great, and so the small issue in the previous post doesn't happen anymore ^^

  • @Hadden89

    The status bar won't cover the panel using this

    #panels-container {
        position: absolute !important;
        z-index: 25;
        height: 100%;

    Also, Christoph's code doesn't work well if, like me, you use tabs on the left and have the panel toggled on that side as well because the z-index is not high enough. The current tab will show through (at least it did when I was watching a video).

  • This is brilliant, thank you.

    I've tried combining it with autohide, but it doesn't seem to work, any pointers? :-)

  • I sort-of managed it

    #main .inner {
        position: relative;
        padding-right: 34px;
    #panels-container {
        position: absolute;
        z-index: 25;
        top: 0;  
        bottom: 0;
        width: 34px !important;
        background-color: var(--colorBg);
        transition: width 0.2s linear 0.2s;
    #panels-container:hover {
        width: 400px !important; 
    #panels-container.right {
        right: 0;

    Of course the only problem is that if you toggle a panel off, you still get the width and the background, but I can sort of live with that.

  • @sdfg

    What do you mean? The panel width should not effect the background, it should just appear over top and then disappear to the side.

Log in to reply

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.