# Nav wrapping in small window with long translations of "login"
**URL:** https://meta.discourse.org/t/nav-wrapping-in-small-window-with-long-translations-of-login/31826
**Category:** Feature
**Created:** [2015 年 8 月 6 日午前 11:30 UTC](https://meta.discourse.org/t/nav-wrapping-in-small-window-with-long-translations-of-login/31826 "2015-08-06T11:30:55Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@gtanczyk](https://meta.discourse.org/u/gtanczyk)
#### Post date: [2015 年 8 月 6 日午前 11:30 UTC](https://meta.discourse.org/t/nav-wrapping-in-small-window-with-long-translations-of-login/31826/1 "2015-08-06T11:30:55Z")
Site logo and icons do not play together well on small screen.
Expected:
- either scale logo or use the smaller one
Screenshot from Android:
Workaround:
> [@codinghorror](#):
>
> In the case of long translated words, if in your language “login” is “mshehjensgsybsnjjebeggsjksoeomendmxkskelflr” you will need to set a max-width via CSS on the relevant controls, or make the mobile logo width smaller via CSS.
Thanks!
---
### Author:  [@ndalliard](https://meta.discourse.org/u/ndalliard)
#### Post date: [2015 年 8 月 6 日午前 11:40 UTC](https://meta.discourse.org/t/nav-wrapping-in-small-window-with-long-translations-of-login/31826/2 "2015-08-06T11:40:22Z")
Jep same here. View when you’re logged in:
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [2015 年 8 月 6 日午後 4:29 UTC](https://meta.discourse.org/t/nav-wrapping-in-small-window-with-long-translations-of-login/31826/3 "2015-08-06T16:29:48Z")
Is this Mobile view or a narrowed Desktop view only?
If Desktop, is it “normal use” to have the viewport so narrow?
---
### Author:  [@ndalliard](https://meta.discourse.org/u/ndalliard)
#### Post date: [2015 年 8 月 6 日午後 4:43 UTC](https://meta.discourse.org/t/nav-wrapping-in-small-window-with-long-translations-of-login/31826/4 "2015-08-06T16:43:41Z")
Oh so true. On mobile there is no problem and on the desktop you should never have the window that narrow. But thats just for me, I dont now if @gtanczyk uses narrow windows…
---
### Author:  [@gtanczyk](https://meta.discourse.org/u/gtanczyk)
#### Post date: [2015 年 8 月 6 日午後 4:44 UTC](https://meta.discourse.org/t/nav-wrapping-in-small-window-with-long-translations-of-login/31826/5 "2015-08-06T16:44:12Z")
Screenshot was done on desktop, however it’s the same on mobile browser, when your logo width exceeds some threshold.
Please also mind I18n translations for **Log in** , **Sign in** buttons. In polish language it is “Logowanie” and “Rejestracja”, which takes few more pixels than corresponding english words.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2015 年 8 月 7 日午前 2:05 UTC](https://meta.discourse.org/t/nav-wrapping-in-small-window-with-long-translations-of-login/31826/6 "2015-08-07T02:05:01Z")
This is not a bug report, the layout is different in mobile. Please provide mobile screenshots, a tiny desktop / laptop / tablet width makes no sense.
---
### Author:  [@gtanczyk](https://meta.discourse.org/u/gtanczyk)
#### Post date: [2015 年 8 月 7 日午前 4:14 UTC](https://meta.discourse.org/t/nav-wrapping-in-small-window-with-long-translations-of-login/31826/7 "2015-08-07T04:14:46Z")
Hello, I have uploaded screenshot from mobile.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2015 年 8 月 7 日午前 4:26 UTC](https://meta.discourse.org/t/nav-wrapping-in-small-window-with-long-translations-of-login/31826/8 "2015-08-07T04:26:08Z")
In the case of long translated words, if in your language “login” is “mshehjensgsybsnjjebeggsjksoeomendmxkskelflr” you will need to set a max-width via CSS on the relevant controls, or make the mobile logo width smaller via CSS.
---
### Author:  [@gtanczyk](https://meta.discourse.org/u/gtanczyk)
#### Post date: [2015 年 8 月 7 日午前 5:16 UTC](https://meta.discourse.org/t/nav-wrapping-in-small-window-with-long-translations-of-login/31826/9 "2015-08-07T05:16:22Z")
Thanks for providing workaround.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2015 年 8 月 7 日午前 6:24 UTC](https://meta.discourse.org/t/nav-wrapping-in-small-window-with-long-translations-of-login/31826/10 "2015-08-07T06:24:15Z")
More specifically, now that I am not on an iPad but in front of a real computer, these CSS rules already exist, so you can amend them or add to them in Admin, Customize, CSS/HTML:
```plaintext
.d-header button.login-button {
margin-left: 7px;
max-width: 75px;
white-space: nowrap;
}
```
here we set a max width on `login-button` and indicate the text should not wrap to the next line.
```plaintext
.d-header #site-logo {
max-width: 125px;
}
```
there is already a max-width specified for the mobile logo CSS, so you can make it smaller as needed with a CSS override.
---
### Author:  [@gtanczyk](https://meta.discourse.org/u/gtanczyk)
#### Post date: [2015 年 8 月 7 日午前 6:32 UTC](https://meta.discourse.org/t/nav-wrapping-in-small-window-with-long-translations-of-login/31826/11 "2015-08-07T06:32:46Z")
How about using `display: table` and `display: table-cell` along with `white-space: nowrap`? I am also thinking about `text-overflow: ellipsis` and `max-width` on “Log in” button.
Perhaps this way there will be no need for CSS overrides. I will test it today and maybe start a PR.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2015 年 8 月 7 日午前 7:16 UTC](https://meta.discourse.org/t/nav-wrapping-in-small-window-with-long-translations-of-login/31826/12 "2015-08-07T07:16:21Z")
Be careful, changes to header can be very dangerous, as we have seen from our (1st and 2nd failed) attempts to use flexbox in the header..
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [2025 年 12 月 4 日午前 11:36 UTC](https://meta.discourse.org/t/nav-wrapping-in-small-window-with-long-translations-of-login/31826/13 "2025-12-04T11:36:53Z")