Header navigation bar overflows in certain screen sizes

[juhalehtonen]

Problem Currently the navigation bar can overflow in certain "small laptop / tablet" window sizes due to the number of items present and the breakpoint assigned for the navbar.

Solution proposal The easiest way this can be addressed is by changing the navbar-expand-md class in lib\erlef_web\templates\layout\header.html.eex to navbar-expand-lg or navbar-expand-xl.

Further discussion It's worth noting that the lg class only addresses the immediate problem, and doesn't accommodate future links added to the navigation bar. The xl class, on the other hand, might hide the desktop navigation too early for some users.

A more future-proof solution would be to redesign the navigation bar altogether, or to rewrite (at least parts of) the CSS to more easily accommodate different amounts of content in different screen sizes.

Screenshot

[starbelly]

I agree and to note we talked about moving away from bootstrap as well to tailwind or at least bootstrap 5.

[starbelly]

This was resolved some time ago.