Solved Menu Button Relocation - Chrome Style

ev0lut1on

Hello there. As the title says I want to ask: is there a way to move the menu button to the same location as in Google Chrome for example?

Whitelite

I updated the script and it works now.
As an addition I removed the space in the top left.

function vivaldiIcon() {
    const adr = document.querySelector('.toolbar-mainbar')
    const menu = document.querySelector('.vivaldi');
    document.querySelector('.vivaldi').style = 'position: relative;';
    adr.appendChild(menu);
    document.querySelector('.win #tabs-container:not(.none).top').style.paddingLeft = 0;
};

let timer = setTimeout(function wait() {
    let adr = document.querySelector('.toolbar-mainbar');
    if (adr) {
        vivaldiIcon();
        clearTimeout(timer);
    }
    else {
        setTimeout(wait, 300);
    }
}, 300);

luetage

@ev0lut1on You can move it pretty much anywhere you want, but you will have to do a custom modification.

edit: Someone moved the menu button already to panel, but you can as well move it to e.g. the end of the address bar.
https://forum.vivaldi.net/topic/28047/vivaldi-icon/11?page=1

ev0lut1on

I'm not quite good at Javascript. Would appreciate if you have a code of a similar term to what I asked. I'll try to modify it myself.

luetage

I linked you the similar code… Anyway, I'm not on Windows, therefore I don't have the menu button and can't test, but try something like this:

function mvMenu() {
    const adr = document.querySelector('.toolbar-addressbar.toolbar');
    const menu = document.querySelector('.vivaldi');
    adr.appendChild(menu);
};

setTimeout(function wait() {
    const browser = document.getElementById('browser');
    if (browser) {
        mvMenu();
    }
    else {
        setTimeout(wait, 300);
    }
}, 300);

ev0lut1on

@luetage It did almost what i wanted. Im curious to know how do you know all the references and selectors to customize it? Is there any list of those anywhere?

luetage

@ev0lut1on https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools

ev0lut1on

@luetage Thank you very much! I'll try to mod it myself, hope i wont get stuck.

ev0lut1on

I'm currently trying to move it at the end of the whole tool bar but it seems it's not working very well. Here's the code and the mess it causes, does anyone have a clue why it's such a mess?

function mvMenu() {
    const adr = document.querySelector('.toolbar-addressbar.toolbar');
    const menu = document.querySelector('.vivaldi');
	const field = document.querySelector('.addressfield');
    adr.insertBefore(menu, field.nextSibling);
};

setTimeout(function wait() {
    const browser = document.getElementById('browser');
    if (browser) {
        mvMenu();
    }
    else {
        setTimeout(wait, 300);
    }
}, 300);

https://prnt.sc/l4yu5f

P.S. I'm on windows

//MODEDIT: Added code block

luetage

Could a windows user test the original code please? I tried to troubleshoot this over chat but I can't really do anything without having access to a windows installation.

Hadden89

//edit: I didn't test very well

Hadden89

@ev0lut1on
I'm not sure, but you could try to push the addressbar with this in your CSS (should avoid the overlap).
But I've as first button, so don't know if could help.
.toolbar-addressbar {margin-left: 26px;} (or margin-right)

This is for codeblock in markdown used here, instead

Your js code works but don't move the button to the right.

pafflick

@ev0lut1on Try this:

function mvMenu() {
    const adr = document.querySelector('.toolbar-addressbar.toolbar');
    const menu = document.querySelector('.vivaldi');
    menu.setAttribute('style','position:static;height:var(--toolbarHeight);');
    adr.appendChild(menu);
};

setTimeout(function wait() {
    const browser = document.getElementById('browser');
    if (browser) {
        mvMenu();
    }
    else {
        setTimeout(wait, 300);
    }
}, 300);

I think it does what you need...

ev0lut1on

@pafflick I definitely will and post the result /issues once i come back from work, thanks!

Edit: Tried it real quick before i go and it works like a charm, thank you a lot! If some moderator wants to grab the code for future use (i bet there will be plenty of people who want it) pin the topic or do as you think is best. SOLVED!

pafflick

@ev0lut1on I'm glad it works. I've linked my reply in your first post, I think it should be easy enough to find it, for everyone who's looking for it.

Aeryn4163

I know this thread is old, but I found it on Google and it wasn't working for me.
If anyone else stumbles upon this topic, the following js file worked for me on the current version (5.2.2623.24 on Windows 11):

function mvMenu() {
    const adr = document.querySelector('.UrlBar.toolbar');
    const menu = document.querySelector('.vivaldi');
	const tabs = document.querySelector('#tabs-container');
	tabs.setAttribute('style','padding-left: 1px')
    menu.setAttribute('style','position:static;height:var(--toolbarHeight);');
    adr.appendChild(menu);
};

setTimeout(function wait() {
    const browser = document.getElementById('browser');
    if (browser) {
        mvMenu();
    }
    else {
        setTimeout(wait, 300);
    }
}, 300);

And this is what the result looks like:

Whitelite

I updated the script and it works now.
As an addition I removed the space in the top left.

function vivaldiIcon() {
    const adr = document.querySelector('.toolbar-mainbar')
    const menu = document.querySelector('.vivaldi');
    document.querySelector('.vivaldi').style = 'position: relative;';
    adr.appendChild(menu);
    document.querySelector('.win #tabs-container:not(.none).top').style.paddingLeft = 0;
};

let timer = setTimeout(function wait() {
    let adr = document.querySelector('.toolbar-mainbar');
    if (adr) {
        vivaldiIcon();
        clearTimeout(timer);
    }
    else {
        setTimeout(wait, 300);
    }
}, 300);

Woolv

UPDATE: I Found this link but it still doesn't work could it be because I have bookmark bar on? What a shame the picture results at the bottom of that persons post look amazing!!!

https://forum.vivaldi.net/topic/31101/menu-button-relocation-chrome-style/15
...........
Hello, I found this Long batch of code(s?) on the internet on how to move the Vivaldi / hamburger menu button over to the right hand side, however it is slightly off & overlaps the the plus sign for opening a new tab window.
Although I love the mod, after 5 or 6 windows are open the ''+ button'' to open a new tab is overlapped & no longer functions (but the menu button still works) does anyone who understands CSS know how to correct this?

(picture of is issue at the bottom of the post)

/****************************** Header / Tabs / Window Buttons ******************************/

#titlebar {
  height: 100%;
}

/* Top bar offset in maximum mode */
.maximized.linux .topmenu {
  margin-top: 5px;
}

/* vivaldi menu button */
.vivaldi {
  left: unset;
  right: 92px;
  top: 4px !important;
  height: 32px !important;
}

#tabs-tabbar-container:not(.none).top {
  padding-top: 5px !important;
  height: 32px !important;
}

/* tab container */
#tabs-container:not(.none).top {
  padding-left: 8px !important;
  padding-right: 130px !important;
}

/* tab bar in case of menu position horizontal */
.horizontal-menu #tabs-container:not(.none).top {
  padding-left: 8px !important;
  padding-right: 7px !important;
}

/* tab bar in case of left side window buttons */

.alt #tabs-container:not(.none).top {
  padding-left: 90px !important;
  padding-right: 33px !important;
}

/* tab background */
.tab:not(.active) {
  background: none !important;
}

/* hover animation */
.tab.highlighted:not(.active) {
  background: white !important;
}

/* tab header alignment */
.tab-position .tab .tab-header {
  flex: 0 0 32px;
  padding-left: 8px;
  padding-right: 1px;
  padding-top: 8px;
}

/* tab close button */
.close {
  background: none;
  margin-top: 1px;
}

/* trash button */
.toggle-trash {
  margin-bottom: 2px;
}

/* top right button menu */
#header > #titlebar > .window-buttongroup {
  right: 10px !important;
  top: 0 !important;
  height: 100%;
  align-items: center;
}

/* new tab */
.button-toolbar.newtab {
  margin-left: 2px;
}

/* Sound icon alignment */
.tab-audio {
  margin-top: 3px;
}

/********************************* Navigation / Search Bar **********************************/

/* Main toolbar */
.toolbar-mainbar {
  height: 40px;
  padding-right: 6px;
}

.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-large {
  padding-top: 3px !important;
}

/* Profile button */
.toolbar .profile-popup {
  padding-top: 3px !important;
}

/* Hide bottom black hline */
.address-top .toolbar-mainbar:after {
  height: 0;
}

/* Main search bar */
.UrlBar-AddressField {
  height: 30px;
  padding: 0 5px 0 8px;
  margin-right: 3px;
  border-radius: 15px;
}

/** loading progress bar **/
.UrlBar-AddressField .pageload .pageload-indicator {
  border-radius: 14px;
  position: absolute;
  width: auto;
  height: 30px;
  left: -1px;
  right: -1px;
  top: -1px;
}

/************************************** Bookmark Bar ****************************************/

.bookmark-bar {
  height: 32px;
  padding-bottom: 2px;
  padding-left: 5px;
}

.bookmarkbarItem {
  border-radius: 6px !important;
}

/***************************************** Utils *******************************************/

/* fix offset in input fields */
input[type="search"] {
  padding: 5px 3px 5px 12px;
}

Thank you.

luetage

@Woolv Always post in the original topic, don’t create a new topic. Only then will the people who are/have been active in the topic be notified.

janvangessel

In order to remove the empty space left after removing the icon from the top left in Linux add the following line below the line referring to .win

document.querySelector('.linux #tabs-container:not(.none).top').style.paddingLeft = 0;

janvangessel

The style that eliminates the empty space left over after moving the button doesn't always disappear, adding !important to the style makes it work more reliably.
(replace .linux for .win when you are on windows)

document.querySelector('.linux #tabs-container:not(.none).top').setAttribute( 'style', 'padding-left: 0 !important' );