Solved Combine Window Title and Address Bar when Tabs are on the Side

scampbll

This broke again for me in 5.3 but all I had to do was remove the .UrlBar portion of the code.

Instead of:

.UrlBar.toolbar.toolbar-mainbar.toolbar-large

Now it's:

.toolbar.toolbar-mainbar.toolbar-large

zo1d

@scampbll thank you, just came here after the recent update (and it once again being broken). This saved me some time .

chrisdlc119

I fully support this, so we can have an option to hide the window title, just like Microsoft Edge currently does. Or even better, a way to customize the position of the Vivaldi button and the URL bar.

I hope Vivaldi looks into this, it will make it look really cool.

geektbee

Another update, another break.......

I had 5.3 working perfectly (with using spacers via the toolbar customizer).

But, then updated to 5.4 last night. broke it.

If someone with CSS guru wizardry in them can take a crack at it and update it to compensate for 5.4, here's the code that works for me in 5.3.2679.70 (Stable channel) (64-bit). Thanks!

combine-header-toolbar.css

/* Remove header */
:-webkit-any(.native, .maximized)#browser #header {
	min-height: 0 !important;
}

/* Keep Vivaldi button */
:-webkit-any(.native, .maximized)#browser .vivaldi  {
	z-index: 1;
}

/* Keep horizontal menu */
:-webkit-any(.native, .maximized)#browser .topmenu {
	position: absolute;
}

/* Reduce toolbar size for vivialdi button */
:-webkit-any(.native, .maximized)#browser:not(.tabs-top) .UrlBar.toolbar.toolbar-mainbar.toolbar-large {
	padding-left: 24px;
}

/* Reduce toolbar size for horizontal menu */
:-webkit-any(.native, .maximized).horizontal-menu#browser:not(.tabs-top) .UrlBar.toolbar.toolbar-mainbar.toolbar-large {
	padding-left: 267px;
}

/* Non-Native window fixes */

/* Keep window buttons */
.maximized#browser .window-buttongroup {
	z-index: 1;
}

/* Reduce toolbar size for window buttons */
.maximized#browser:not(.native):not(.tabs-top) .UrlBar.toolbar.toolbar-mainbar.toolbar-large {
	padding-right: 140px;
}

/* Adjust horizontal menu position */
.maximized#browser:not(.native) .topmenu {
	left: -30px;
}

/* Remove vivaldi button, horizontal menu and window buttons when no ui */
.maximized.minimal-ui#browser :-webkit-any(.vivaldi, .topmenu, .window-buttongroup) {
	display: none !important;
}

/* Tabs on top fixes */

/* Maximized not Native - Reduce tab bar size for horizontal menu and window buttons */
.maximized.horizontal-menu#browser:not(.native) #tabs-container.top {
	padding-left: 276px !important;
	padding-right: 140px !important;
}

/* Native - Reduce tab bar size for horizontal menu and window buttons */
.native.horizontal-menu#browser #tabs-container.top {
	padding-left: 276px !important;
}

sedative29rus

@geektbee Replace z-index: 1; with z-index: 5; in both cases.

geektbee

@sedative29rus Perfect!!! Thanks!

cassandrawilliams

Hi all,

Is there some simple modification to the @geektbee's CSS which would combine the title and address bars when the window is not maximized (in addition to when it is maximized)?

Thanks!

dude99

@cassandrawilliams replace all :-webkit-any(.native, .maximized) with just .native & also remove all .maximized from his code should make it works like you wanted. But then u might not be able to drag the window around...

cassandrawilliams

@dude99 Thanks for your answer.

I've done as you have suggested, and it does not seem to have the intended effect. There is no discernable change when the CSS here is enabled or disabled

/* Remove header */
.native#browser #header {
	min-height: 0 !important;
}

/* Keep Vivaldi button */
.native#browser .vivaldi  {
	z-index: 5;
}

/* Keep horizontal menu */
.native#browser .topmenu {
	position: absolute;
}

/* Reduce toolbar size for vivialdi button */
.native#browser:not(.tabs-top) .UrlBar.toolbar.toolbar-mainbar.toolbar-large {
	padding-left: 24px;
}

/* Reduce toolbar size for horizontal menu */
.native.horizontal-menu#browser:not(.tabs-top) .UrlBar.toolbar.toolbar-mainbar.toolbar-large {
	padding-left: 267px;
}

/* Non-Native window fixes */

/* Keep window buttons */
#browser .window-buttongroup {
	z-index: 5;
}

/* Reduce toolbar size for window buttons */
#browser:not(.native):not(.tabs-top) .UrlBar.toolbar.toolbar-mainbar.toolbar-large {
	padding-right: 140px;
}

/* Adjust horizontal menu position */
#browser:not(.native) .topmenu {
	left: -30px;
}

/* Remove vivaldi button, horizontal menu and window buttons when no ui */
.minimal-ui#browser :-webkit-any(.vivaldi, .topmenu, .window-buttongroup) {
	display: none !important;
}

/* Tabs on top fixes */

/* Maximized not Native - Reduce tab bar size for horizontal menu and window buttons */
.horizontal-menu#browser:not(.native) #tabs-container.top {
	padding-left: 276px !important;
	padding-right: 140px !important;
}

/* Native - Reduce tab bar size for horizontal menu and window buttons */
.native.horizontal-menu#browser #tabs-container.top {
	padding-left: 276px !important;
}

dude99

@cassandrawilliams I think all the .UrlBar.toolbar.toolbar-mainbar.toolbar-large should also be replace with .toolbar-mainbar cuz it's an obsolete selector.

EDIT: I just realized this CSS code is really ancient, not sure if it still works with v5 Vivaldi at all... LOL

cassandrawilliams

@dude99 Thanks again.

Still, no difference I can see when enabled or disabled

/* Remove header */
.native#browser #header {
	min-height: 0 !important;
}

/* Keep Vivaldi button */
.native#browser .vivaldi  {
	z-index: 5;
}

/* Keep horizontal menu */
.native#browser .topmenu {
	position: absolute;
}

/* Reduce toolbar size for vivialdi button */
.native#browser:not(.tabs-top) .toolbar-mainbar {
	padding-left: 24px;
}

/* Reduce toolbar size for horizontal menu */
.native.horizontal-menu#browser:not(.tabs-top) .toolbar-mainbar {
	padding-left: 267px;
}

/* Non-Native window fixes */

/* Keep window buttons */
#browser .window-buttongroup {
	z-index: 5;
}

/* Reduce toolbar size for window buttons */
#browser:not(.native):not(.tabs-top) .toolbar-mainbar {
	padding-right: 140px;
}

/* Adjust horizontal menu position */
#browser:not(.native) .topmenu {
	left: -30px;
}

/* Remove vivaldi button, horizontal menu and window buttons when no ui */
.minimal-ui#browser :-webkit-any(.vivaldi, .topmenu, .window-buttongroup) {
	display: none !important;
}

/* Tabs on top fixes */

/* Maximized not Native - Reduce tab bar size for horizontal menu and window buttons */
.horizontal-menu#browser:not(.native) #tabs-container.top {
	padding-left: 276px !important;
	padding-right: 140px !important;
}

/* Native - Reduce tab bar size for horizontal menu and window buttons */
.native.horizontal-menu#browser #tabs-container.top {
	padding-left: 276px !important;
}

dude99

@cassandrawilliams Now I tested the code, they seems to kinda work.

Did u enabled native mode? Most of the code seems to apply to only during native mode. I remove all .native except :not(.native) & they works ~~with some weird missing Vivaldi & windows buttons when I mouseover the mainbar. LOL~~

cassandrawilliams

@dude99 Here's what I've done now

/* Remove header */
:-webkit-any(.native, .normal)#browser #header {
	min-height: 0 !important;
}

/* Keep Vivaldi button */
:-webkit-any(.native, .normal)#browser .vivaldi  {
	z-index: 5;
}



/* Reduce toolbar size for vivialdi button */
:-webkit-any(.native, .normal)#browser:not(.tabs-top) .UrlBar.toolbar.toolbar-mainbar.toolbar-large {
	padding-left: 24px;
}



/* Non-Native window fixes */

/* Keep window buttons */
.normal#browser .window-buttongroup {
	z-index: 5;
}

/* Reduce toolbar size for window buttons */
.normal#browser:not(.native):not(.tabs-top) .UrlBar.toolbar.toolbar-mainbar.toolbar-large {
	padding-right: 140px;
}


/* Remove vivaldi button, horizontal menu and window buttons when no ui */
.normal.minimal-ui#browser :-webkit-any(.vivaldi, .topmenu, .window-buttongroup) {
	display: none !important;
}

/* Tabs on top fixes */

/* Maximized not Native - Reduce tab bar size for horizontal menu and window buttons */
.normal.horizontal-menu#browser:not(.native) #tabs-container.top {
	padding-left: 276px !important;
	padding-right: 140px !important;
}

This works as intended, with the side effect you noted that the window is no longer draggable. So, as you can see, I've removed the CSS blocks which remove the titlebar when the menu is horizontal, and added a button to the address bar to toggle the horizontal menu, which now has the effect of toggling the title bar, which also allows for the window to be dragged when needed.

Collapsed:
Screenshot 2022-08-11 154506.png
Expanded:
Screenshot 2022-08-11 154539.png

dude99

@cassandrawilliams Add this to make the mainbar always dragable:

.toolbar-mainbar {app-region: drag;}

with this you can drag the window around via the mainbar.

Edit: u forgot to fix .UrlBar.toolbar.toolbar-mainbar.toolbar-large obsolete selector in the last post...

u probably should also replace :-webkit-any with :is cuz it's also obsolete function & will be unsupported soon...

cassandrawilliams

@dude99 Thanks. While this does make the bar draggable, the only draggable region is the region where the window buttons are (and so the buttons become unclickable, as that space is now the draggable part of the bar). Unfortunately the space blocks from the toolbar customization menu do not allow for dragging. So it seems like there cannot both be functioning window buttons and a draggable mainbar.

/* Remove header */
:is(.native, .normal)#browser #header {
	min-height: 0 !important;
}

/* Keep Vivaldi button */
:is(.native, .normal)#browser .vivaldi  {
	z-index: 5;
}

/* Reduce toolbar size for vivialdi button */
:is(.native, .normal)#browser:not(.tabs-top) .toolbar-mainbar {
	padding-left: 24px;
}

/* Non-Native window fixes */

/* Keep window buttons */
.normal#browser .window-buttongroup {
	z-index: 5;
}

/* Reduce toolbar size for window buttons */
.normal#browser:not(.native):not(.tabs-top) .toolbar-mainbar {
	padding-right: 140px;
}

/* Remove vivaldi button, horizontal menu and window buttons when no ui */
.normal.minimal-ui#browser :is(.vivaldi, .topmenu, .window-buttongroup) {
	display: none !important;
}

/* Tabs on top fixes */

/* Maximized not Native - Reduce tab bar size for horizontal menu and window buttons */
.normal.horizontal-menu#browser:not(.native) #tabs-container.top {
	padding-left: 276px !important;
	padding-right: 140px !important;
}

/*Draggable*/
.toolbar-mainbar {app-region: drag;}

dude99

@cassandrawilliams Then add a space button (via Editor toolbar) into the mainbar & then use this code instead:

#browser:not(:has(.toolbar-editor)) .toolbar-mainbar .toolbar-spacer {app-region: drag;}

with this you will be able to drag the window with the empty space

dude99

remake for v5.4: https://forum.vivaldi.net/post/607480

VMz69

@mathiasbr hi bro. this is exactly qhat i need. but I'm new user in vivaldi and i dont know anything about programing in CSS can you explain me how I do this modification in my vivaldi browser????

VMz69

@scampbll FINALLY!!! I MADE IT.!

THANKS ALL.

Guilhermems

While vertical tabs or bottom tabs can be useful, when you enable them, there is still the window title bar consuming space on the screen, in addition to the lost space to the tabs. Without the tabs, the window title bar is almost empty and serves little purpose other than being a place to drag the window. If you put the tabs at the bottom, the situation is even worse, because you get even less vertical space. Vertical space is very important on modern widescreen displays and on small laptop displays, so not making use of it reduces the advantage of putting tabs in other places.

Microsoft Edge solves this issue by adding a little bit of dragging space to the right of the window and combining the menu icon and window controls with the address bar (this is optional there but it doesn't need to be):

Bringing this to Vivaldi would be a great thing for small or wide displays, where every pixel matters.

Thank you for reading.

Solved Combine Window Title and Address Bar when Tabs are on the Side

◊ More CSS Mod ◊

◊ More CSS Mod ◊

◊ More CSS Mod ◊

◊ More CSS Mod ◊

◊ More CSS Mod ◊

◊ More CSS Mod ◊