On new website, when menu bar is too long, it is shoved out of the white space reserved for it

[Pi2048]

Steps to reproduce:

• Go to the test website
• Zoom in
• Keep zooming in

At certain zoom levels, the text in the menu bar is shoved downward when it doesn't fit anymore into the space allotted to it.

This happens both on Firefox and Chromium.

[bartromgens]

Good find!

This also happens without zooming when the menu is simply too long due to too many/long pages. It is currently working as intended (not an implementation bug), but not the desired behaviour.

This is a common problem with the bootstrap navbar (menu). If the menu width is fixed, this can be managed by hiding certain menu items depending on the screen-size (hard-coded), reducing font size, or collapsing into the menu into the hamburger (mobile) menu.

Our menu width is not fixed; the menu is defined in the admin. The website template is designed with a fixed width in mind. If the menu is within this max width, there is no problem, also not with zooming.

The real question is what behaviour we want here, some options I can think of:

• Allow a max menu width and manually check that the menu is not too wide (the current design assumption). We can increase the max-width a bit, but there will be a limit.
• Collapse the menu (mobile-like) if it is too wide
• Move the menu a row down, like what happens now, but then with a white background so it is readable

Something to discuss.

[mathemaat]

It appears this is no longer an issue, and we've forgotten to close the issue. If I keep zooming, then at some point the horizontal menu is replaced by a button that opens the menu vertically.