Move the extensions in the toolbar?

MyVivaldiBrowser

New user, everything going well. Except...
to move the extension icons in the menu bar from the far RIGHT side of the bar to the LEFT, near the navigation buttons? Really no way? I mean, my 1Password extension is in an inconvenient position on the right and I want to move it to the far left.

modedit edited text on user's request

luetage

@MyVivaldiBrowser You can move all extensions to the left with custom CSS ⇒ .toolbar-extensions {order: -1;}

MyVivaldiBrowser

Thanks. But CSS is not easy to do for laymen. Vivaldi does so much but forgot to include this one simple function. Should be built-in to the UI.
I see your how-to now, but where is the CSS file?

luetage

@MyVivaldiBrowser Will come at some point, but are you willing to wait months to years for it? I included the CSS needed in above post. Enable “Allow for using CSS Modifications” in vivaldi://experiments, create a .css file and copy the code into it, link to that file from vivaldi://settings/appearance/.

Or wait.

Dancer18

@MyVivaldiBrowser It's very easy (in Linux and Windows at least) with Shift + mouse-hold-left to move them.
You can move panel-icons the same way, even the items in the status bar.

MyVivaldiBrowser

I made a big mistake in my first post. Sorry. ‍️

This: Except...no way to move the extension icons in the menu bar from the far left side of the bar to the right,

Should be:

....to move the extension icons in the menu bar from the far RIGHT side of the bar to the LEFT,

Dancer18

@MyVivaldiBrowser You mean to move them left of adress-bar?

luetage

@MyVivaldiBrowser I know, the code already does exactly that.

MyVivaldiBrowser

Yes. To the left of of address bar. Sorry to be so confusing.

MyVivaldiBrowser

@Gwen-Dragon Thanks

Dancer18

@MyVivaldiBrowser
I tried the css-solution from @luetage . And it works.
It is not difficult to manage it.

Take a simple text-editor,
paste in this code:

.toolbar-extensions {order: -1;}

name the file as "custom.css" and save it on your computer somewhere.
paste in this URL in your vivaldi - adressbar:

vivaldi://experiments/

and check the box Allow for using CSS modifications
open your settings by pasting this URL into your adress - bar:

vivaldi://settings/appearance/

find this section to give the right path to your custom.css (sorry my screenshot is in german, but you'll find it):
Then close the browser and restart.

That's it. good luck!

MyVivaldiBrowser

Thank you for the detailed CSS how-to. I was on the verge of doing that CSS but then I discovered the option to which hide individual extensions, and the way to show them again. So that will suffice for now. Also, I wanted to move individual extensions from the right to the left, not all of them.
If I eventually proceed with the CSS I'm going to make a note that I did that and keep that note in Vivaldi in case version updates don't maintain the CSS or I need to revert back.

spymunna

You can simply press Ctrl+Drag with Mouse to arrange extensions order

fires3as0n

I have just found a weird way to move items on Vivaldi toolbar on MacOS (not extensions, just any item including address bar)

Use command+click on item you want to move. (this is not intuitive and is definitely a bug - not just click when holding command, sequential clicks do nothing, only first command+click works. If you need to repeat you need to push whole combination once again)
Drag the item whenever you want until you see a blue vertical bar on its new position (it could be hardly visible under the cursor)
First unhold the command and then release the mouse button. Simply releasing the mouse button (not intuitive and a bug again) will return item to its previous position.

I have struggled a lot with my extensions moved accidently to the left until I found this weird way to put it back. (MacOS 14.6.1; Vivaldi 6.8)