Vivaldi expand arrow broke my css!!

achizuki33

I haven't use Vivaldi for a while, So i came back to Vivaldi after a few months and i enable css and add in my css and it appears they have added an expand arrow, which is cool.
However, it appears to have completely borked my css to add text so the side of the menu, the text clips through the expand arrow and the tabs also clip on top of the menu as well, making it basically unusuable:

I tried adding css to removethe expand arrow but that doesn't fix the tabs clipping over it.

I do not know how to use css, so I was wondering if someone could help add css that fixes the length of the menu and also hides the expand arrow as well as adding the text.

Thanks!

Here is my current css:

/* Add text after the menu button */
#browser {
  --menuText: "Vivaldi";
  --menuWidth: 80px;
}

#tabs-container:not(.none).top {
  padding-left: calc(var(--menuWidth) / var(--uiZoomLevel)) !important;
}

span.vivaldi-v::after {
  content: var(--menuText);
  position: absolute;
  left: 34px;
}

.vivaldi span {
  padding-left: 6px;
  justify-content: unset;
}

.vivaldi {
  width: var(--menuWidth);
}

nomadic

@achizuki33 It is always good to ask in the original place you got the CSS. I almost missed this post.

The default CSS for the UI now uses a variable called --menuWidth, so that needed to be changed. There were then some alignment changes and the removal of the new menu dropdown arrow to add.

This new CSS should hopefully work (also added to the original post in the other thread):

/* Add text after the menu button */
/* https://forum.vivaldi.net/post/676295 */
#browser {
  --menuText: "Vivaldi";
  --customMenuWidth: 80px;
}

#tabs-container:not(.none).top {
  padding-left: calc(var(--customMenuWidth) / var(--uiZoomLevel)) !important;
}

span.vivaldi-v::after {
  content: var(--menuText);
  position: absolute;
  left: 34px;
}

.vivaldi span {
  padding-left: 3px;
  justify-content: unset;
}

.vivaldi {
  width: var(--customMenuWidth);
  justify-content: unset;
}

/* Hide the menu dropdown arrow */
.vivaldi .expand-arrow {
  display: none;
}