Menu Breakpoint Request

[markaplet]

I wanted to request a feature that would allow mobile menu to appear at a larger screen size. For example anything smaller than the Large breakpoint of ≤991px

The reason for this request is that we have observed a trend where on tablets, the menu remains in the desktop breakpoint and causes the menu to overlap the logo. This could be mitigated if the menu would change to the mobile version at the larger 991px screen size.

Here are some sample sites as reference:

https://oal.ca.gov
https://www.alrb.ca.gov

To see the issue navigate to one of the above sites and reduce the browser width to a size between 768px to 991px. I would recommend using whatever Responsive Design View mode your browser supports within the developer tools.

The resulting presentation is an overlapping menu that creates readability issues in these form factors.

I know the recommendation is to use shorter labels, and fewer menu items overall, but it's not something that is easily controlled by us. Changing the menu breakpoint while not completely fixing the issue, would lessen it for the majority.

[markaplet]

I wanted to add further comment to this issue and share some additional discoveries that were reported recently in hopes that this issue will gain additional traction and hopefully resolution.

The issue above causes accessibility issues with the menu. Because the menu is partially obscured by the logo it is difficult to read and and also prevents users from clicking the menu links as they have a lower z-index than the logo link. The Issue is exacerbated when the page is zoomed to 200%.

Changing the breakpoints as recommended will address the issue for this breakpoint.

Additionally, I observed that between these breakpoints Bootstrap limits the max-width of containers to 720px making the issue increasingly worse. At 991px the left and right gutter are approx 135px wide. This is valuable screen real estate that could be better used by content. This issue is present even with the latest version of Bootstrap. (v4.5.3) From my testing it appears that the .container width can be overwritten to 100% without effecting the grid system. Extensive regression testing would be recommended.

Here are two screenshots of OAL homepage with and without the width changes applied represented as before and after.

OAL Menu Before

OAL Menu After