Bookmarks in Address Bar Mod

  • @j1979958 You can define the addressbar as
    adr = document.querySelector('.toolbar-addressbar.toolbar');
    and then just append the bookmarks

  • so how will it wrap the code?

    actually i use:

    /width of bookmarks bar/
    :root {
    --bar-width: 495px;
    @media (max-width: 700px) {
    :root {
    --bar-width: 22px;
    /bookmarks bar in address bar/
    #browser.bookmark-bar-top > #main > .toolbar-addressbar{
    padding-right: var(--bar-width);
    #browser.bookmark-bar-top > #main > .bookmark-bar{
    width: var(--bar-width);
    position: absolute;
    right: 0;
    height: 35px;
    /hide folder icons/
    #browser.bookmark-bar-top > #main > .bookmark-bar .folder-icon{
    #browser.bookmark-bar-top > #main > .bookmark-bar .folder-icon+span{
    margin-left: 0px;

  • @j1979958 No idea, the solution I provided is for the javascript mod. I thought the CSS mod shows at the end of addressbar anyway, so not sure what your problem really is.

  • Re: Bookmarks in Address Bar Mod

    Okay so I added this, it creates the buttons but they are unclickable (and the whole bar is greyed out, can't click to open sites or see the rest with the >> button)
    Any idea why? Running Vivaldi 2.6 on Windows 10 x64

    (green icon and 3 dots are normal addons, then the greyed out bookmarks)

    Replace this section in the css code (basically adding the z-index line):

    #browser.bookmark-bar-top > #main > .bookmark-bar{
    width: var(--bar-width);
    position: absolute;
    right: 0;
    height: 35px;
    z-index: 10;

    Solution thanks to @RSD

  • I LOVE THIS MOD, better UI that the bookmarks bar.

  • Thanks for this mod. I don't know why they force you to use the bookmark bar, that wastes screen space. When they also could offer you a boomark button like in Firefox. It was the only thing that annoyed me with Chrome based browsers. I hope it will be added natively in Vivaldi some day.

  • @wadhah Adding Z-index helped, it stopped working after the update with the bookmarks.

    I'm having trouble setting up the version with the java script though, I wanted it next to the adress bar. Should it also be put into /style folder? I really don't know what I might be doing wrong here.

  • This post is deleted!

  • Using the js mod and is working very nice! 👍
    There is an annoyance though..

    The appearance of the button looks blank, like this:
    alt text
    The dropdown menu is white, too.
    They don't understand the dark skin I use.. 😟
    Is there a way to make them dark (by settings or CSS)?

  • OK, found it..
    Just added = "#666666"; = "0";
    morebookmarks.setAttribute('title', "Bookmarks");

    and got this:

    Searching for the menu color solution now..
    This looks like a global system (Windows) setting though...😠

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