Display long title on the top screen

[Fabien_Vermot]

Hello,

I would like to know how to display using CSS an entire long title at the top of the screen (see screenshot below the title in the green circle).

Is it possible to display it on one or two lines?

Thanks for your help and your ideas

[Himaladin]

This is strange because I don’t see that in the new app. Is your application the classic one?

[Fabien_Vermot]

Nope it is a new app.

I’ve already applied a custom css code :

#page-root:has(.home-custom-class) span[class*="unified-nav-bar"] {
   white-space: break-spaces !important;
}

[Himaladin]

Use this code if you want to be flexible:

#page-root:has(.home-custom-class) span[class*="unified-nav-bar"] {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  white-space: normal;
}

[Fabien_Vermot]

Thanks @Himaladin

I’ve still a little issue. I’d like to display the whole title and to center it (cf. screenshot below)

Any ideas please ?

[Himaladin]

You can add the following code: “text-align: center;”

[Fabien_Vermot]

Thanks for your help
It is perfect to center the text
Do you know if there is a way to enlarge the box containing the title in order to display the whole text ?

[Himaladin]

This will affect the siblings. Are you sure?

#page-root:has(.home-custom-class) #nav-root > div > div > div > header, #page-root:has(.home-custom-class) #nav-root > div > div > div > header > div > div {
height:fit-content;
padding-bottom:10px;
}

[Fabien_Vermot]

Thanks @Himaladin
In fact, it is not really good.
I thought that it was possible to enlarge the width of the box containing the title. But probably not
Thanks for your help

[Himaladin]

You should directly use another component by hiding the nav header.