Move Bookmarks Bar next to Address Bar

VivaldiNoob

Dear vivaldi non-noobs and noobs,

On a thread here from 3 years ago about moving the bookmarks bar to the right of the address bar, I found some hints about how to do it. However, that method does not work any more.

Not wanting to necromance that thread after 3 years, I thought I'd ask the question anew, so that maybe some of the experts in the general thread might have some new ideas.

Basically the question is, as the title indicates:

Is there a way to move the Bookmarks Bar right next to the address bar? (see screenshot from firefox)

Screenshot

.. mainly to save some screen real estate and see more of the page.

Thank you so very much for your help.

Cheers,
VivaldiNoob

MasterLeo29

@vivaldinoob Hey there. I played around a bit and I think I achieved what you ask. See if this css mod helps you :

.UrlBar.toolbar.toolbar-mainbar.toolbar-large {
    max-width: 60%;
    width: 60%;
    place-self: start;
}

.bookmark-bar.default {
    max-width: 40%;
    width: 40%;
    place-self: flex-end;
    position: absolute;
    height: 34px;
}

Result on my end :

Hope it helps

maxoku

@masterleo29 Weird, but it doesn't work for me. It only makes space on right of toolbar, but the bookmarks bar remains where it was.

MasterLeo29

@maxoku Do you have any other css mods ? Can you post a pic ?

maxoku

@masterleo29 I have, but unrelated. Nevertheless I've disabled them temporarily when taking a screenshot:

MasterLeo29

@maxoku Tested the script again on my side and couldn't reproduce the problem. I'd suggest you to try and check Vivaldi's developer console and check if you can find the css selectors that I used on my mod.

maxoku

@masterleo29 How?

MasterLeo29

@maxoku There are multiple ways to do it (there's even a chain command for it in the "command chain recipes" post), but a simple way :

Open a new tab with "vivaldi://experiments"
Use the keyboard shortcut "Ctrl + Shift + I"
The developer tools will be open, and you can browse through the html structure

maxoku

@masterleo29 Oki, I did that and figured it out.
The problem was in:

.bookmark-bar.default

I've changed it to:

.bookmark-bar

and now it works. Thanks.
Seems like that your bookmark bar has default class and mine doesn't.

VivaldiNoob

@masterleo29

I don't know how to thank you. You're a genius man. It worked on the first try. I really thought it was impossible because I read somewhere that it is forbidden by chrome or something. But here it is.

Just one small thing, I don't remember how I did it on Firefox, but if you check the first screenshot I posted, folders are text only, and bookmarks are icons only, mainly to save space.

Based on your solution, I'm gonna try to play with it a bit more, now that I know where to start, and I will post a follow up.

Thank you so much man.

Edit: Got it to work

Code:

#main > div.bookmark-bar.default > div > button:nth-child(2) > span {
    font-size: 0;
}

#main > div.bookmark-bar.default > div > button.uifocusstop.bookmarkbarItem.folder > svg {
    display: none;
}

MasterLeo29

@vivaldinoob No problem, always glad to help someone customize their own Vivaldi

maxoku

After Vivaldi's update bookmarks vanished from my toolbar. Whatever I change in the code it just doesn't want to appear on it anymore.

MasterLeo29

sligthly updated version of the css code (tested on my 5.3 snapshot)

.mainbar {
    max-width: 70%;
    width: 70%;
    place-self: start;
}

.bookmark-bar.default {
    max-width: 30%;
    width: 30%;
    place-self: flex-end;
    position: absolute;
    height: 34px;
}

maxoku

@MasterLeo29 Oh, so the .urlbar changed to .mainbar, thanks a lot, now it works.

fontcl

@MasterLeo29
I'm using Vivaldi 5.6.2867.50
Do you know how to make the bookmarks bar the same height as the main bar to avoid the grey space in the bottom?

I have tried changing the height value but nothing changes.

MasterLeo29

@fontcl Just did a quick test and it seemed to work. Do you by any chance have another css mod active that may conflict with this one ?

fontcl

No.
In the css code had to change .bookmark-bar.default to .bookmark-bar and add this:

/* tabs-top address-top bookmark-bar-top */
#browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar {
top: 34px;
transform: translateY(-100%);
}

but now the problem is on top and on the bottom the line of the address bar is darker than from the bookmark bar.

MasterLeo29

@fontcl Alright. Send me your full css content (and tag me, in case I forget ) plus your current theme setup (to try and make sure I see exactly what you see)

I'll try and fix this issue sometime this week (not sure exactly "when", but worse case scenario I'll look at it during the weekend)

fontcl

@MasterLeo29
Thanks for your help but I found this code that work great for me!

@Spyderr mod

fontcl

This post is deleted!