Top bar issue on some windows size.

peopleinside

This issue seems is not present on https://discuss.flarum.org/, is related to the Beta 13?

Flarum core 0.1.0-beta.13
PHP version: 7.3.xx
Loaded extensions: Core, date, libxml, pcre, dom, fileinfo, filter, hash, json, SPL, bz2, posix, Reflection, session, SimpleXML, standard, xml, xmlreader, xmlwriter, bcmath, openssl, calendar, ctype, curl, dba, mbstring, ftp, gd, gettext, gmp, iconv, imap, intl, ldap, exif, memcached, zlib, pcntl, PDO, pdo_sqlite, shmop, soap, sockets, sqlite3, sysvsem, sysvshm, tidy, tokenizer, wddx, xmlrpc, xsl, zip, Phar, mysqlnd, mysqli, pdo_mysql, ionCube Loader, Zend OPcache
+------------------------------+-----------------+--------+
| Flarum Extensions            |                 |        |
+------------------------------+-----------------+--------+
| ID                           | Version         | Commit |
+------------------------------+-----------------+--------+
| flarum-approval              | v0.1.0-beta.13  |        |
| flarum-bbcode                | v0.1.0-beta.12  |        |
| flarum-emoji                 | v0.1.0-beta.13  |        |
| flarum-flags                 | v0.1.0-beta.13  |        |
| flarum-likes                 | v0.1.0-beta.13  |        |
| flarum-lock                  | v0.1.0-beta.13  |        |
| flarum-mentions              | v0.1.0-beta.13  |        |
| flarum-sticky                | v0.1.0-beta.13  |        |
| flarum-subscriptions         | v0.1.0-beta.13  |        |
| flarum-lang-english          | v0.1.0-beta.13  |        |
| flarum-statistics            | v0.1.0-beta.13  |        |
| flarum-akismet               | v0.1.0-beta.13  |        |
| nearata-lang-italian         | v0.1.0-beta.9.1 |        |
| flarum-auth-facebook         | v0.1.0-beta.13  |        |
| fof-links                    | 0.2.1           |        |
| flarum-auth-github           | v0.1.0-beta.13  |        |
| flarum-auth-twitter          | v0.1.0-beta.13  |        |
| fof-default-user-preferences | 0.2.0           |        |
| fof-user-bio                 | 0.1.3           |        |
| fof-recaptcha                | 0.1.2           |        |
| flarum-suspend               | v0.1.0-beta.13  |        |
| flarum-pusher                | v0.1.0-beta.13  |        |
| flarum-markdown              | v0.1.0-beta.13  |        |
| reflar-cookie-consent        | 0.2.0           |        |
| franzl-open-links-in-new-tab | v0.1.0          |        |
| clarkwinkelmann-emojionearea | 0.2.2           |        |
| fof-user-directory           | 0.3.4           |        |
| noriods-auto-more            | 0.3.0           |        |
| flarum-tags                  | v0.1.0-beta.13  |        |
| fof-upload                   | 0.9.1           |        |
+------------------------------+-----------------+--------+
Base URL: https://community.peopleinside.it
Installation path: [...]community.peopleinside.it

Tested without custom CSS theme.

peopleinside

Found, the issue is caused from the extension forf/link, i will report it.
https://github.com/FriendsOfFlarum/links

Issue link: FriendsOfFlarum/links20

clarkwinkelmann

It's been a semi-known issue for a while. If there is too much stuff in the header, it overflows.

There's a lot that contributes to it, the username length, the language selector, the links menu, ...

I'm not even sure the problem should be fof/links's responsability. You could get the header completely filled up with other extensions as well.

peopleinside

clarkwinkelmann Seems if i disable the extension the issue is resolved... if is not fof/links's will be an issue with Flarum?

Hope can be fixed in some way.

clarkwinkelmann

peopleinside the "simple" solution is to reduce the number of links or use shorter labels in the links.

Admins will encounter the issue more frequently than normal users because they have additional icons for flags and such.

A real solution will require deciding what behavior is wanted. fof/links could somehow push additional links into some sort of dropdown when it notices the width is not enough.

In core we could make it so it overflows in another way. But I don't see how we can handle this better. The number of items needs to be reduced somehow, either by the extensions that add them, or by the admin by removing links or other icons.

Pollux

peopleinside Hope can be fixed in some w

There is a lot you can do with CSS. For example, reduce the padding of the menu link items:

#header-primary .Button {
    padding: 8px 10px;
}

or let it shrink / expand with the available space:

#header-primary .Button {
    padding: 8px calc(2vw - 10px);
}

Then you could change your logo to a smaller version depending on the screen width:

@media (min-width: 767px) and (max-width: 1024px) {
    #home-link {
        background: url(https://community.peopleinside.it/assets/logo-xiwioosb.png);
        width: 2.7em;
        height: 2.2em;
        display: inline-block;
    }
    .Header-logo {
        visibility: hidden;
    }
}

... and hide the username accordingly:

@media (min-width: 767px) and (max-width: 1024px) {
    .SessionDropdown .Dropdown-toggle .Avatar {
        margin: -2px -6px;
    }
    .Button-label {
        display: none;
    }
}

I have not tested the whole code, especially the exact screen sizes, but you get the idea.

peopleinside

Pollux It works, with some small customizations is perfect. Thanks!
Amazing!

Hari

peopleinside mark it as best answer. 🙂

thanks a lot Pollux