# Display long title on the top screen
**URL:** https://community.glideapps.com/t/display-long-title-on-the-top-screen/73857
**Category:** Ask for Help
**Tags:** custom-css
**Created:** [June 4, 2024, 10:23am UTC](https://community.glideapps.com/t/display-long-title-on-the-top-screen/73857 "2024-06-04T10:23:36Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@Fabien\_Vermot](https://community.glideapps.com/u/Fabien_Vermot)
#### Post date: [June 4, 2024, 10:23am UTC](https://community.glideapps.com/t/display-long-title-on-the-top-screen/73857/1 "2024-06-04T10:23:36Z")
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
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [June 4, 2024, 11:55am UTC](https://community.glideapps.com/t/display-long-title-on-the-top-screen/73857/2 "2024-06-04T11:55:16Z")
This is strange because I don’t see that in the new app. Is your application the classic one?
---
### Author:  [@Fabien\_Vermot](https://community.glideapps.com/u/Fabien_Vermot)
#### Post date: [June 4, 2024, 11:58am UTC](https://community.glideapps.com/t/display-long-title-on-the-top-screen/73857/3 "2024-06-04T11:58:54Z")
Nope it is a new app.
I’ve already applied a custom css code :
```auto
#page-root:has(.home-custom-class) span[class*="unified-nav-bar"] {
white-space: break-spaces !important;
}
```
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [June 4, 2024, 12:53pm UTC](https://community.glideapps.com/t/display-long-title-on-the-top-screen/73857/4 "2024-06-04T12:53:22Z")
Use this code if you want to be flexible:
```auto
#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;
}
```
---
### Author:  [@Fabien\_Vermot](https://community.glideapps.com/u/Fabien_Vermot)
#### Post date: [June 4, 2024, 5:47pm UTC](https://community.glideapps.com/t/display-long-title-on-the-top-screen/73857/5 "2024-06-04T17:47:19Z")
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 ?
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [June 4, 2024, 11:17pm UTC](https://community.glideapps.com/t/display-long-title-on-the-top-screen/73857/6 "2024-06-04T23:17:03Z")
You can add the following code: “text-align: center;”
---
### Author:  [@Fabien\_Vermot](https://community.glideapps.com/u/Fabien_Vermot)
#### Post date: [June 5, 2024, 6:51am UTC](https://community.glideapps.com/t/display-long-title-on-the-top-screen/73857/7 "2024-06-05T06:51:18Z")
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 ?
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [June 5, 2024, 7:27am UTC](https://community.glideapps.com/t/display-long-title-on-the-top-screen/73857/8 "2024-06-05T07:27:26Z")
This will affect the siblings. Are you sure?
```auto
#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;
}
```
---
### Author:  [@Fabien\_Vermot](https://community.glideapps.com/u/Fabien_Vermot)
#### Post date: [June 5, 2024, 8:05pm UTC](https://community.glideapps.com/t/display-long-title-on-the-top-screen/73857/9 "2024-06-05T20:05:34Z")
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
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [June 6, 2024, 12:37am UTC](https://community.glideapps.com/t/display-long-title-on-the-top-screen/73857/10 "2024-06-06T00:37:42Z")
You should directly use another component by hiding the nav header.