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

[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

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

[ffuser1]

This post is deleted!

[Pesala]

@Guilhermems Please vote for the existing feature request: Combine Window Title Bar and Address Bar when Tabs are on the Side.

Welcome to the Community. Here are a few links for your bookmarks that you may find useful:

• Help on Feature Requests • Add Search as Web Panel
• Vivaldi Help
• Forum Markdown Help
• Using the Forum Search
• Local Forums in your language
• Modding Vivaldi
• Web Panels
• Vivaldi for Android
• Snapshot vs Stable
• Vivaldi's Business Model
• Help us grow

[sedative29rus]

@Guilhermems The developers have already started adding this feature. And the snapshot 5.8 has the option you need.

[saduran]

@sedative29rus Wonderful news

[pafflick]

The title bar is no longer shown with vertical tabs as of Vivaldi 6.0, which was released today. You can always enable it back if you prefer. Just go to Settings > Appearance > Window Appearance:

Show Title Bar

[geektbee]

Yaaaash!!!!! 'Tis beautiful! Thank y'all, all!!!