We may need a more comfortable and beautiful bookmark bar.

lart

I usually use bookmarks in subfolders on the bookmarks bar a lot.

The style of the current bookmark bar is too plain. We can do better and be more flexible.

Style: The way the current version displays when there are too many bookmarks is not perfect. The current version does not behave perfectly when there are too many bookmarks. The bookmark list will fill the entire screen from top to bottom, and the top of the list will suddenly extend beyond the browser tab bar. Such abrupt behavior can be very uncomfortable. The edge browser's processing method is much better, but it has the problem that the separation distance between bookmarks is too large.
Hope to support the feature of automatically hiding the bookmarks bar. The bookmarks bar is hidden by default, and is automatically displayed when the mouse moves to the bookmarks bar position. When the mouse is moved away, the bookmarks bar will continue to be hidden.

Pesala

@lart I use a CSS mode to autohide the Bookmarks Bar.

/* Simple AutomaticBookmark-bar */
.bookmark-bar-top .bookmark-bar {margin-bottom: -28px; z-index: 1; transform: translateY(0); transition: transform 0.1s 0.5s !important;}
.bookmark-bar-top .bookmark-bar::before {content: ''; position: absolute; height: 12px; width: 100%; top: 100%;}
.bookmark-bar-top .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(-100%);  transition: transform 0.1s 0.5s !important;}

See Modding Vivaldi for instructions.

I don't have the first problem, because I only show my most frequently used bookmark on the Bookmark Bar. You can choose any folder as your Bookmark Bar folder, or create a new one just for that purpose.

Tip

Put bookmarks that you use daily on the Speed Dial
Put bookmarks that you use frequently on the Bookmark Bar
Access rarely used bookmarks from the Bookmark Menu, or by typing in the URL field of Quick Commands dialog (F2).

Pesala

@lart Welcome to the Community. Here are a few links for your bookmarks that you may find useful:

Catweazle

I've a lot of Bookmarks in the Bar, but visible only the most used, all other in several folders corresponding of the content (Info, Resources, Official, Editors, etc...)

barbudo2005

@lart

1.- As @Catweazle and @Pesala said create a special folder you use the most to show in the bar:

2.- Another Autohide bookmark bar by @tam710562 :

Test which one performs better for you.

/* Auto hide bookmark bar */

#browser.tabs-top.address-top.bookmark-bar-top .mainbar,
#browser.tabs-top.address-bottom.bookmark-bar-bottom .mainbar,
#browser.tabs-top.address-bottom.bookmark-bar-top .mainbar,
#browser.tabs-bottom.address-top.bookmark-bar-top .mainbar,
#browser.tabs-bottom.address-bottom.bookmark-bar-bottom .mainbar,
#browser.tabs-left.address-top.bookmark-bar-top .mainbar,
#browser.tabs-left.address-bottom.bookmark-bar-bottom .mainbar,
#browser.tabs-right.address-top.bookmark-bar-top .mainbar,
#browser.tabs-right.address-bottom.bookmark-bar-bottom .mainbar {
  z-index: 3;
}

#browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar,
#browser.tabs-top.address-bottom.bookmark-bar-bottom .bookmark-bar,
#browser.tabs-top.address-bottom.bookmark-bar-top .bookmark-bar,
#browser.tabs-bottom.address-top.bookmark-bar-top .bookmark-bar,
#browser.tabs-bottom.address-bottom.bookmark-bar-bottom .bookmark-bar,
#browser.tabs-left.address-top.bookmark-bar-top .bookmark-bar,
#browser.tabs-left.address-bottom.bookmark-bar-bottom .bookmark-bar,
#browser.tabs-right.address-top.bookmark-bar-top .bookmark-bar,
#browser.tabs-right.address-bottom.bookmark-bar-bottom .bookmark-bar {
  position: absolute !important;
  width: 100%;
  transition: transform 0.2s !important;
  z-index: 2;
}

/* tabs-top address-top bookmark-bar-top */

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

#browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar:hover,
#browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar:focus-within,
#browser.tabs-top.address-top.bookmark-bar-top .mainbar:hover~.bookmark-bar,
#browser.tabs-top.address-top.bookmark-bar-top #header:hover~#main .bookmark-bar {
  transform: translateY(0);
}

/* tabs-top address-bottom bookmark-bar-bottom */

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

#browser.tabs-top.address-bottom.bookmark-bar-bottom .bookmark-bar:hover,
#browser.tabs-top.address-bottom.bookmark-bar-bottom .bookmark-bar:focus-within,
#browser.tabs-top.address-bottom.bookmark-bar-bottom .mainbar:hover~.bookmark-bar {
  transform: translateY(0);
}

/* tabs-top address-bottom bookmark-bar-top */

#browser.tabs-top.address-bottom.bookmark-bar-top .bookmark-bar {
  top: 0;
  transform: translateY(-100%);
}

#browser.tabs-top.address-bottom.bookmark-bar-top .bookmark-bar:hover,
#browser.tabs-top.address-bottom.bookmark-bar-top .bookmark-bar:focus-within,
#browser.tabs-top.address-bottom.bookmark-bar-top #header:hover~#main .bookmark-bar {
  transform: translateY(0);
}

/* tabs-bottom address-top bookmark-bar-top */

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

#browser.tabs-bottom.address-top.bookmark-bar-top .bookmark-bar:hover,
#browser.tabs-bottom.address-top.bookmark-bar-top .bookmark-bar:focus-within,
#browser.tabs-bottom.address-top.bookmark-bar-top .mainbar:hover~.bookmark-bar {
  transform: translateY(0);
}

/* tabs-bottom address-bottom bookmark-bar-bottom */

#browser.tabs-bottom.address-bottom.bookmark-bar-bottom .bookmark-bar {
  bottom: 5px;
  transform: translateY(0);
}

#browser.tabs-bottom.address-bottom.bookmark-bar-bottom .bookmark-bar:hover,
#browser.tabs-bottom.address-bottom.bookmark-bar-bottom .bookmark-bar:focus-within,
#browser.tabs-bottom.address-bottom.bookmark-bar-bottom .mainbar:hover~.bookmark-bar {
  transform: translateY(-100%);
}

/* tabs-left address-top bookmark-bar-top */

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

#browser.tabs-left.address-top.bookmark-bar-top .bookmark-bar:hover,
#browser.tabs-left.address-top.bookmark-bar-top .bookmark-bar:focus-within,
#browser.tabs-left.address-top.bookmark-bar-top .mainbar:hover~.bookmark-bar {
  transform: translateY(0);
}

/* tabs-left address-bottom bookmark-bar-bottom */

#browser.tabs-left.address-bottom.bookmark-bar-bottom .bookmark-bar {
  bottom: 5px;
  transform: translateY(0);
}

#browser.tabs-left.address-bottom.bookmark-bar-bottom .bookmark-bar:hover,
#browser.tabs-left.address-bottom.bookmark-bar-bottom .bookmark-bar:focus-within,
#browser.tabs-left.address-bottom.bookmark-bar-bottom .mainbar:hover~.bookmark-bar {
  transform: translateY(-100%);
}

/* tabs-right address-top bookmark-bar-top */

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

#browser.tabs-right.address-top.bookmark-bar-top .bookmark-bar:hover,
#browser.tabs-right.address-top.bookmark-bar-top .bookmark-bar:focus-within,
#browser.tabs-right.address-top.bookmark-bar-top .mainbar:hover~.bookmark-bar {
  transform: translateY(0);
}

/* tabs-right address-bottom bookmark-bar-bottom */

#browser.tabs-right.address-bottom.bookmark-bar-bottom .bookmark-bar {
  bottom: 5px;
  transform: translateY(0);
}

#browser.tabs-right.address-bottom.bookmark-bar-bottom .bookmark-bar:hover,
#browser.tabs-right.address-bottom.bookmark-bar-bottom .bookmark-bar:focus-within,
#browser.tabs-right.address-bottom.bookmark-bar-bottom .mainbar:hover~.bookmark-bar {
  transform: translateY(-100%);

3.- Said:

The style of the current bookmark bar is too plain.

You can style the bookmark bar, from this:

To this:

Catweazle

lart

@Pesala @Catweazle @barbudo2005
Thanks for your quick and helpful replies.

@Pesala @barbudo2005
I'll try these auto-hiding code snippets.

@Catweazle
Your tight button layout gave me some inspiration, thanks.
:>

For my first question, it can indeed be avoided if a specific folder is used to collect some frequently used bookmarks. But this problem still exists, maybe the development team of vivaldi can improve it.

Here is my screenshot:

barbudo2005

@lart

Make more folders with less bookmarks.

lart

@barbudo2005

Thanks! So far, this is indeed a better solution.