Auto hide bookmark bar
-
you should use: https://forum.vivaldi.net/topic/64142/
/* Simple Automate Bookmark-bar */ /* bottom bookmark-bar */ .bookmark-bar-bottom .bookmark-bar {margin-top: -28px; z-index: 1; transform: translateY(0); transition: transform .1s 0s !important;} .bookmark-bar-bottom .bookmark-bar::before {content: ''; position: absolute; height: 4px; width: 100%; bottom: 100%;} .bookmark-bar-bottom .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(100%); transition: transform .1s 1s !important;} /* top bookmark-bar */ .bookmark-bar-top .bookmark-bar {margin-bottom: -28px; z-index: 1; transform: translateY(0); transition: transform .1s 0s !important;} .bookmark-bar-top .bookmark-bar::before {content: ''; position: absolute; height: 4px; width: 100%; top: 100%;} /* option A: trigger zone below lowest TOP bar */ .bookmark-bar-top .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(-100%); transition: transform .1s 1s !important;} /* option B: trigger by focus/mouseover header, tabbar, or URL bar */ /.address-top.bookmark-bar-top #header:not(:hover) ~ #main .mainbar:not(:focus-within):not(:hover) ~ .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(-100%); transition: transform .1s 1s !important;} /:not(.address-top).bookmark-bar-top #header:not(:hover) ~ #main > .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(-100%); transition: transform .1s 1s !important;}
-
@yakn99925566 said in Auto hide bookmark bar:
you should use: https://forum.vivaldi.net/topic/64142/
It's a bit buggy and slow to appear but at least it works. Thanks.
-
-
Yes please update. The first bookmark hides itself behind the panelbar, so you can't click or see it.
Also Option B seems to not work at all.
-
I added a fix, hope it solves the problem
-
@tam710562 aaaaaand where can I see the corrected code ? was it really impossible to leave at least some kind of link?
-
@MARK2580 The standard practice is to edit the original post with the new changes.
If you look at the first post you can see it was updated in the change log:
@tam710562 said in Auto hide bookmark bar:
05/06/2022: Fix errors for Vivaldi 5.3.2679.30
-
Nope, I still have the same issue. The first bookmark hides behind the panelbar. See the screenshot.
-
@devarion this, i think is really hard to fix because if it avoid the panel automatically, it will cause the web page to jump down when bookmark bar appear
you can try adding these line and see how it goes.bookmark-bar { left: 35px; }
-
Tried it but didn't change anything. Still looks exactly the same. But thanks!
-
Some strange script. The panel appears when it wants to, you need to aim accurately somewhere below the address bar. The panel itself sometimes slides out half and immediately hides or simply slides out with a strong delay. The script that I had installed earlier worked perfectly and smoothly, it was activated when hovering over the address bar. But this script broke down due to a recent browser update, where they decided to change the arrow to the extensions icon.
.bookmark-bar{ position: fixed !important; top: 64px; display: none; width: 100%; z-index: 1; opacity: 0; } .bookmark-bar:hover, .toolbar:hover ~ .bookmark-bar, #header:hover ~ #main .bookmark-bar { opacity: 1; display: initial; animation: fancy-bookmarks 0.2s !important; } @keyframes fancy-bookmarks { 0%{ display: initial; opacity: 0; } 1% { opacity: 0; } 100% { opacity: 1; } }
-
@devarion try this code and see if it solves the problem
/* 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: 5; } #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: 4; } /* 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%); }
-
@MARK2580 change
.toolbar
to.mainbar
will solve the problem -
@tam710562 damn it! only one word separated me from the repair
-
@tam710562 Yes perfect! It's solved. Many many thanks!
-
@tam710562 said in Auto hide bookmark bar:
05/06/2022: Fix errors for Vivaldi 5.3.2679.30
Thanks for fixing the code.
-
Thank you so much for fixing it, I can't use Vivaldi without this CSS anymore.
-
@tam710562 I'm very late to the party, but having only just now deployed this for the first time, i wish to sincerely congratulate you for your cleverness, & thank you for your generosity. It seems to work beautifully, & i'm very grateful.
-
This post is deleted! -
Hello! I've been using this for a few years now and it's been great but after the most recent vivaldi update, it seems to display inside the address bar? I don't really know how to explain it, here is a snippet of it happening. If anyone knows a workaround for this, I would be incredibly grateful!