Nav wrapping in small window with long translations of "login"

Feature
1

Site logo and icons do not play together well on small screen.

Expected:

  • either scale logo or use the smaller one

Screenshot from Android:

Pasted image480Ă—854 104 KB

Workaround:

Thanks!

2 Likes
2

Jep same here. View when you’re logged in:

2015-08-06-133905_1920x1080_scrot.png383Ă—1040 71.1 KB

1 Like
3

Is this Mobile view or a narrowed Desktop view only?

If Desktop, is it “normal use” to have the viewport so narrow?

1 Like
4

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…

5

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.

2 Likes
6

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.

7

Hello, I have uploaded screenshot from mobile.

8

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.

9

Thanks for providing workaround.

10

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:

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

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

11

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.

1 Like
12

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…

1 Like