Make bookmark bar text bold?

  • Hey folks! Just today I switched to Vivaldi and I'm really loving it! I was wondering whether it would be possible to make the bookmark bar text bold and if so, how. Thank you!

    BONUS REQUEST: Is it possible to increase the space between the bookmarks?

  • Try this:
    .bookmark-bar button {font-weight: bold; margin-left: 5px;}

  • Don't know for the spacing, but this should work for text sizes

    .bookmark-bar {
    font-size: 16px;
    font-weight: bold;

    Sub menus won't be bigger or bold as they don't follow vivaldi ui yet.
    For the how, best way to do this is vivaldi hooks

  • @luetage I apologize for any stupid questions, I'm an absolute beginner!
    Do I do this in the blank browser.html file in /Applications/Vivaldi/Contents/Versions/CURRENTVERSION/Vivaldi Framework.framework/Resources/vivaldi/ ? And if so, do I need to write anything more?

  • Follow the instructions here

    Generally browser.html only points to custom.css, and your custom code goes in this newly created file. The file itself has to be put into the style folder.

  • @deusnovus

    This should work for the spacing. Just change the padding to whatever suits you

    .bookmark-bar button {
        padding-right: 15px;

    Keep in mind that you will have to make a backup of your css files because Vivaldi will delete them when it updates that folder. I would suggest using You can add your custom files to the hooks folder which I do not believe Vivaldi touches. When installing that way, the browser.html is edited for you and your files will be selectable within the settings page

  • @luetage Thank you for the resources, it worked! But unfortunately, the bookmark bar goes past the window, instead of automatically truncating the bookmarks, so I cannot see the end of it. Any way to solve this?

  • @deusnovus Change margin-left to padding-right, sjudenim's solution is better and doesn't have this problem.

  • @sjudenim Wow that's very useful, thank you so much!

  • @luetage You're right, sjudenim's solution worked great. One last question: How can I make the active tab's text bold? Actually, I've been trying to find a CSS glossary for Vivaldi in order to play around with various things, but I couldn't find anything. (I don't even know if that's even a thing, I don't know jack about programming!)

  • @deusnovus {font-weight: bold;}
    And no, there is no css glossary, but you can look up all the element names yourself ---->

  • @luetage You've been really helpful, thank you so much!

  • @deusnovus

    You're going down the rabbit hole now.

    To start tinkering with Vivaldi, using the devtools will be a great help, but you need to load Vivaldi with a shortcut. Create a shortcut for Vivaldi and add this to the Target,
    --debug-packed-apps --silent-debugger-extension-api
    Now when you start Vivaldi you can right click on any element and choose "Inspect". This will open up the Developer Tools window. On the left will be the html and on the right will be the style sheet (css). Hovering over the headings will highlight that area on the browser. You can make live changes there as well as add things but this will not be saved. So you will want to highlight the element and then copy and paste it to your custom css file. This should get you started

    As for your active tab,

    .tab-position {
        font-weight: bold;

    or you can be more specific and fool around with this number

    .tab-position {
        font-weight: 500;

    change it by hundreds

Log in to reply

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