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

[Abhimanyu]

1. i want to use this mod but as it isn't checked for security issues by the vivaldi team, is it ok to use this mod?
2. do any of you have insights why being upvoted in large no. it hasn't been implemented yet or at least in pipeline?
3. is there any fix for overlapping issues when tab bar and/or address bar is located in right & top respectively.
4. is there any other mod or some other way to achieve this without going for fullscreen mode one?

[nomadic]

@Abhimanyu said in Combine Window Title and Address Bar when Tabs are on the Side:

i want to use this mod but as it isn't checked for security issues by the vivaldi team, is it ok to use this mod?

CSS mods are pretty safe. You would have to be pretty inventive to make something harmful security wise. As long as CSS doesn't have any URLs in it, I don't see how it could damage security other than tricking you into clicking on something you might not want to.

do any of you have insights why being upvoted in large no. it hasn't been implemented yet or at least in pipeline?

There is currently an experimental feature being worked on in the current snapshot version that allows better customization of toolbars. It seems reasonable that it could be adapted to include this feature.

[Abhimanyu]

There is currently an experimental feature being worked on in the current snapshot version that allows better customization of toolbars. It seems reasonable that it could be adapted to include this feature.

thanks for the update.

[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:

Expanded:

[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