Bookmarks in address bar Mod

    1. Install CSS mod
    2. Show bookmarks bar on top
    3. Change width of bar or other things in CSS for your needs
    4. Enjoy!


    /*width of bookmarks bar*/
    :root {
    	--bar-width: 200px;
    @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;



  • Good idea, for me personally (testing this without any other mods running), the bookmarks bar overlaps with the last extension icon in the address bar. Otherwise I like the css only approach, would be far easier with js obviously, but this is simpler and easier on resources.

  • Adding a simple .extensions-wrapper::after {content:""; width: 24px;} to your code fixes this.

  • cool idea, I'll try it for sure

  • @luetage this for me only add useless space.

  • @kurevska_registracia Hmm, seems like your variable does the same thing but doesn't work on macOS. Probably needs an !important or something, but I'm too lazy to look at it again right now.

  • Nice, this is exactly what Vivaldi is lacking, good job. Is it possible to make that button appear on the left of the adress bar?

Log in to reply

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