Thanks for the new release Jeremy. It looks great and I’ve just been playing with the new menu feature.
One slight issue I found was that the height for the mobile menu overlay was slightly too tall meaning that the browser displays a vertical scroll bar for the mobile menu when shown.
Looking at the code I can see that the style for the menu is calculated with;
Thanks for the feedback. The hamburger menu-bar height is calculated from the text height plus vertical padding (it’s not always 36px) and I’m not sure if it’s possible for this to be completely accurate. I think I decided it was better to overestimate than underestimate and have the menu stop short of the bottom of the screen. Do you have scroll bars set to “always show”?
It’s possible that we should allow users to tweak this setting. Another situation where it will be inaccurate is if the menu is positioned lower than the top of the screen.
I suspected the height may be somewhat fluid so things like this will be tricky to get right. Yes, I have scrollbars set to always visible in the Mac’s general prefs. Could we set the height using flex box or vh do you think rather than using calc to make a pixel perfect fit? I’d need to have a play to see if I could get that to work.
I now see what you mean about positioning the menu not at the top of the screen. Maybe the method employed with Freeway’s responsive menus would be a better solution where a ‘sheet’ covers the whole display area and the close icon (and possibly the home menu item) is duplicated purely for the mobile view. You’d then avoid menus that we’re opened only to appear below the page fold.
I’m not sure that it’s much of an issue for end users. The scrollbar preference is a Mac legacy feature, so it doesn’t really apply to mobile devices, which is where you’re normally going to be interacting with hamburger menus.
I agree the issue is mainly down to the Mac’s vertical scroll bar and the content shift to the left as the browser shoe horns in the scroll bar. That visual jump isn’t present on mobile even though the menu extends beyond the height of the viewpoint.
To prevent scroll bars from appearing on a top-positioned menu, you can set a maximum height of 100vh (Maximum Height in the Min/Max Dimensions section of the Box Inspector) and set overflow to be hidden (Overflow in the Style section of the Box Inspector).