This happens in both D8 and D7.
I always use browsers at half my screen width (1920/2=960). Unfortunately, that means that the toolbar may look broken, both in D7 and D8 — depending on how many top-level admin menu items you have on your site. See for yourself:
Worse, at smaller screen widths, it always looks broken, even with the default number of top-level admin menu items in D7/D8. See for yourself:
The cause — AFAICT — is that the breakpoint for switching from horizontal to vertical is not configured correctly: it's too lax/not aggressive enough. Plus, two rows for the horizontal toolbar should probably be supported, but unfortunately Toolbar/Navbar's CSS does not accommodate this: see the second screenshot, the D8 part: the "Content" and "Reports" links'/buttons' vertical separators line up perfectly, but due to no horizontal separators, this looks bizarre & confusing.
Comment | File | Size | Author |
---|---|---|---|
toolbar_min_width_for_horizontal_looks_broken.png | 271.17 KB | Wim Leers | |
toolbar_960-D7-D8.png | 244.09 KB | Wim Leers |
Comments
Comment #1
Wim LeersComment #2
hass CreditAttribution: hass commentedHas this changed in D8 core?
I like how it works as vertical is really a mess. This line floating looks a lot better to me than switching.
Comment #3
hass CreditAttribution: hass commentedI verified this under D8 and it happens there, too. Moving to core first. We need to backport a solution later.
Comment #4
idebr CreditAttribution: idebr commentedComment #5
xjmComment #13
nod_Comment #17
quietone CreditAttribution: quietone at PreviousNext commentedI haven't noticed problems with the toolbar is quite some time. I was just doing some testing on a Drupal 9.2.15 site and the toolbar is fine there at various window widths.
Therefore, closing as outdated. If this is incorrect reopen the issue, by setting the status to 'Active', and add a comment.
Thanks!