custom.css stopped working after last update.

  • Hello,

    After upgrading to the latest version my custom layout using custom.css no longer works correctly.

    Before address bar was in correct place:

    After update the address bar is on the bottom of the top panel:

    Content of my custom.css:

    #tabs-container.bottom {
        order: -1;
        border-top: none;
        padding-top: var(--padding);
        padding-bottom: 6px !important;
    /* bookmarks bar above tabs */
    .bookmark-bar {
        order: -2;
    .toolbar.toolbar-addressbar {
        order: -3;

    This script worked fine for all previous versions starting from Oct, 2018 when Vivaldi 2.0 came out, until now.

    The custom.css is included in browser.html file.

    <!DOCTYPE html>
        <!-- Keep the styling in sync with ./window.html -->
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="style/common.css" />
        <link rel="stylesheet" href="style/custom.css" />
        <link rel="stylesheet" href="chrome://vivaldi-data/css-mods/css" />
          body {

    My guess is something was changed in the base layout and my style script no longer works. How can i modify the script so that it works with new version?

    More info:
    Tab bar position: bottom
    Address bar position: top
    Bookmark bar position: top

    Vivaldi 3.3.2022.45 (Stable channel) (32-bit)
    Revision a05c4d885c8da0745ffe551e567e84b9fb6a5889
    OS Windows 10 OS Version 2004 (Build 19041.508)

  • Change the .toolbar.toolbar-addressbar to .UrlBar.

    FYI, since V2.6 there’s a much more convenient way to mod Vivaldi, see the pinned thread (section Vivaldi 2.6 and above).

  • @potmeklecbohdan, yes that worked. Thank You.

Log in to reply

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