Autohide Bookmarks Bar everywhere, except inside Speed Dial

[dude99]

There are a few JS mod emulate Chrome BB inside Speed Dial & auto-hide it everywhere else. This is my CSS mod to get the job done with the new & all powerful :has() pseudo selector!

---

Read Me

1. You can evoke the hidden BB with keyboard/MG shortcut, just setup Focus Bookmarks Bar with your preferred shortcut & you are done.

2. I have also added mouseover trigger zone (orange bar in demo above) at the top/bottom in line 4 & 5. You may enlarge the height of the trigger zone by alter 5px (top BB) & 7px (bottom BB) values to make it easier to summon BB.

3. If you prefer the BB always hidden when you don't need it, then try this instead: https://forum.vivaldi.net/post/502395

4. In case you don't know yet, you can hit ALT key, then B to access the Full Bookmark list/menu. Who need the bloated Bookmarks bar anyway?! LOL

---

CSS Code

/* Automate SD Bookmarks Bar */
#browser:not(:has(.startpage)) .bookmark-bar:not(:hover):not(:focus-within) {max-height: 0; overflow: hidden; border:0; z-index:1;}
#browser.bookmark-bar-top:has(.startpage) .bookmark-bar, .bookmark-bar-top .bookmark-bar:is(:hover, :focus-within) {margin-bottom: -29px; z-index:1;} /* float top BB */
#browser.bookmark-bar-top:not(:has(.startpage)) .bookmark-bar::before {content:''; position: absolute; left:0; right:0; top:0; height: 5px;} /* add top BB trigger zone */
#browser.bookmark-bar-bottom:not(:has(.startpage)) .bookmark-bar::before {content:''; position: absolute; left:0; right:0; bottom:0; height: 7px;} /* add bottom BB trigger zone */

NOTE: Pls enable chrome://flags/#enable-experimental-web-platform-features for this code to work properly.

---

I don't use the BB & prefer the Bookmarks Panel instead, so this is another one-off effort CSS mod from me. I made this CSS mod to test out the new pseudo selector :has(), it's a really, really powerful new drug... Holy Crap! Did I just realized this :has() thingy probably can reveal any hidden toolbar by mouseover/focus on ANY visible element?!

I think we have unlock the true power of CSS! Now the possibilities is really endless!! And I have to rethink all the CSS mod I have previously created!!! I think I'm too high to think of anything else now...

[Pathduck]

The CSS master returneth!

I think I'm too high to think of anything else now...

Danny approves!

[dude99]

Simple example of what u can do with :has() to evoke a hidden toolbar from another toolbar... Add this code after OP code to allow you mouseover Mainbar to reveal the Bookmarks Bar

CSS Code

#browser:not(:has(.startpage)):has(.mainbar:is(:hover)) .bookmark-bar {max-height: unset;}

And the result can be quit comical if you set both toolbars far, far, far apart... LOL

(Flashing animation removed to avoid triggering some seizure disorders)

Now, u can just replace .mainbar with other toolbar ID/class like .toolbar-statusbar to evoke the bookmarks bar with Statusbar or any other toolbar you like!

[hheim]

This is really great, thanks for making and sharing it. I was looking for a solution to https://forum.vivaldi.net/topic/29930/, because I like the way other Chromium browsers do bookmarks bars. I figured I'd use this and just edit the pulldown bookmarks bar to have zero height or something.

I copied the code in the initial post and this does exactly what I wanted... which was unexpected. I thought I'd have to modify something. I can't find the mouseover zone to get the bookmarks bar to pull down - there's no colored overlay at the top of webpages or the tab bar. Blindly mousing over those areas anyway doesn't do anything.

I'm certainly not complaining - this has fixed an annoyance I've had for years with Vivaldi. Just thought I'd say thanks and mention that here in 2023 maybe something has changed such that the pulldown doesn't work like it used to, or maybe I just messed something up ‍️

[dude99]

@hheim Try add background-color: orange; after 5px; & 7px; to add orange color to the trigger zone. I add the orange bar in the demo as a visual guide to let reader know where the trigger zone is, it's not in the OP code because it's kinda distracting to some people...

Also, you can follow readme no 2 instruction to increase the thickness of the trigger zone. I'm using a 1080px screen so that's my preferred trigger zone size, if you are using 4k or 8k screen, then you probably need to multiply it's size by 3 or 4 times to be big enough for you screen resolution.

Lastly I won't be able to fix any of my CSS mod anymore, at least not until I'm rich enough to buy a new PC or laptop. LOL

[CasanovaSan]

There is a small problem with vertical tabs, when i unhide the bookmark bar, the vertical tabs overlay the bookmarks bar
(the fix would be to make the bookmark bar border the vertical tab (basically how edge has it)

[vitormathews]

How to make the reverse way: always show the Bookmark Bar in Speed Dial, and at the same time allowing to toggle it on/off with its shortcut when viewing an webpage? I mean, what I need it's the BB to always show in the Speed Dial, not necessarily it to be hidden otherwise.

[dude99]

@vitormathews This mod won't hide the BB in speeddial page, then you can setup a Focus Bookmarks Bar shortcut to show the BB in regular webpage.

If it doesn't works as descript, then it's probably broke... LOL

[vitormathews]

@dude99 I don't know if I was clear in my previous comment, so I'll try to express myself better this time:
What I want is:

1. Speed Dial: Bookmark Bar always shown;
2. Regular tabs: manually show/hide it.

I mean, I don't necessarily need it to be always hidden when I'm on regular tabs, as sometimes I need to use it from there; I just need it to be always shown on Speed Dial.

[dude99]

@vitormathews said in Autohide Bookmarks Bar everywhere, except inside Speed Dial:

1. Speed Dial: Bookmark Bar always shown;

This mod doesn't hide the BB in SD page. But if you disabled the BB manually via Bookmarks Bar shortcut, then it will be disabled.

@vitormathews said in Autohide Bookmarks Bar everywhere, except inside Speed Dial:

2. Regular tabs: manually show/hide it.

This CSS mod always hide BB in regular page by default, you can summon it by focus on it via Focus Bookmarks Bar shortcut or mouseover the trigger zone. And if you disabled the BB manually via Bookmarks Bar shortcut, then it will be disabled.

To me, what you wanted is very similar as what this mod already does, IMHO we just look at it from a different perspectives. Maybe you missed the Focus bookmarks bar shortcut part which I kept repeating... So, just to be clear: DONT DISABLED THE BB WITH Bookmarks Bar shortcut, just unfocused the bookmark bar to hide it in regular pages after you evoked it.

---

---

If you are talking about hard locked the BB in speed dial page so that it can't be disabled via Bookmarks Bar shortcut, then my guess is it is possible to achieve that with CSS mod. But unfortunately I can't code it for you because I don't have access to the latest Vivaldi stable CSS code, cuz my PC still stuck with windows 8, Vivaldi v5.6.

Here is a code you can try, I code it based on my experience with Vivaldi v5.6, but I'm not sure if it will work with the latest Vivaldi, cuz I can't test it:

#browser:has(.startpage) .bookmark-bar {display: flex !important;}

The idea is when there is .startpage (SD) then overwrite .bookmark-bar (BB's display) to flex. This should be able to stop Vivaldi from disabled BB in SD page. If it doesn't work, then open a new topic to made request from other CSS guru to help you to code this CSS/JS mod. Sorry, I'm pretty much useless and hiatus in CSS mod since Vivaldi v5.7 onward... LOL

[vitormathews]

This CSS mod always hide BB in regular page by default, you can summon it by focus on it via Focus Bookmarks Bar shortcut or mouseover the trigger zone. And if you disabled the BB manually via Bookmarks Bar shortcut, then it will be disabled.

Oh, sorry, I missed this part. Now I tested the Focus Bookmark Bar command and it works fine. But in the other hand, I couln't make the trigger zone to work.

If you are talking about hard locked the BB in speed dial page so that it can't be disabled via Bookmarks Bar shortcut (...)

Yes! That's what I was talking about. But unfortunately the code you suggested didn't work.

[dude99]

@vitormathews Well, if it's broken, then I can't fix it... because you know, I can't test it with the latest stable to find out why & how it broke. So, that's another CSS mod bite the dust. LOL

[vitormathews]

@dude99 No problem, I hope you come back someday, we miss you. Good luck!

[fufuchao]

With use this mod, the bookmarks bar will hide the "start page navigation".

[dude99]

@fufuchao Hi, this CSS mod is written in 2022 during v5.6. As of now v6 stable have made many changes and thus this mod is no longer working properly, and unfortunately I can't fix it cuz I still stuck with v5.7.

So you can try post a new thread to request for a similar mod in the mod forum, there are many great modder in Vivaldi forum, I'm sure one of 'em are willing to take a crack at this problem.

[luetage]

@dude99 This works for me: #browser:not(:has(.startpage)) .bookmark-bar {display: none;}. Nothing fundamental seems to have changed. For anyone who needs the trigger zones and whatnot, good luck.

[dude99]

@luetage said in Autohide Bookmarks Bar everywhere, except inside Speed Dial:

Nothing fundamental seems to have changed.

Hmm... after much inspection of the screenshot by @fufucao I noticed the navigation bar is still there, it just cover up by the bookmark bar. LOL

So my guess is the 2nd line code in my OP isn't working properly in v6. Can you pls fix this for me and post the code here? Or even better, just adopt this CSS mod, as I do not use bookmark bar personally & won't be fixing any of my CSS mod anytime soon...