How do I move the menu button from the left corner of the tab bar, to the right corner of the address bar?

mgunt5

Hey Vivaldi community,

I am trying to move the Vivaldi menu button icon to the right side of the address bar, out of a personal preference. Now given that Vivaldi for desktop's UI is based on web technologies, it should be able to do using a CSS or JavaScript modification. But when I tried doing that using CSS, every time I set the browser in full-screen view, and then exit full-screen, the menu button returns to the top left corner of the tab bar.

I talked to someone previously about this, and they gave me a hint. They said that I should look into writing a JavaScript modification with a mutation observer which should fix the problem. The concern is that I am not an expert in writing JavaScript code. I have some experience with C++, Java, and basic JavaScript in college, but that is all the expertise I have. I would really appreciate some help. Thank you.

Pathduck

@mgunt5 Hi, I guess a natural question would be: What CSS are you using now?

mgunt5

@Pathduck The CSS I am using is not targeting the menu button on the left side of the address bar. I was hoping someone would help me with this.

Pathduck

@mgunt5 When I read your post I got the impression you had managed to move the button, but when going full-screen and back it reverted its position?

mgunt5

@Pathduck I did move the button using CSS, but since the code gave me undesired results upon exiting full-screen mode, I decided to delete the CSS file containing the style code.

Pathduck

@mgunt5 OK then so now you can't remember?

The class selector for the button is .vivaldi
Its full selector would be
#header #titlebar button.vivaldi

You should learn to inspect the UI to find the needed selectors:
https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools

How to actually move it to the right I have no idea... that's a case for the CSS gurus.

mgunt5

@Pathduck Thanks for the information. Whenever I try to do the modification using CSS, the button returns to its original location after exiting full-screen mode.

Pathduck

@mgunt5 said in How do I move the menu button from the left corner of the tab bar, to the right corner of the address bar?:

Thanks for the information. Whenever I try to do the modification using CSS, the button returns to its original location after exiting full-screen mode.

That's the part I found strange and the reason why I asked for your original CSS code.

It shouldn't happen, when the browser returns to normal it should still use the CSS.

How exactly are you applying these CSS mods?
Are you following the guide?
https://forum.vivaldi.net/topic/10549/modding-vivaldi