Mega Menu, resize jump at 991x890 pixels

Hi guys,

here the steps to reproduce:

  1. create a new page using stacks
  2. place the foundry control center stack in
  3. place the Banner stack next
  4. Set the banner background color to black
  5. place inside the banner the Mega Menu stack

What should happen:
The Mega Menu Nav Bar sits nicely in the middle while resizing

What happens:
Only at 991x890 the nav bar jumps to the top of the page and reduces it’s size.
When you resize it above 991x890 or below it jumps back to normal.

It looks like that happens to the “Navbar” and “NavbarPro” stack as well without placing them inside a banner.

Can anyone reproduce this ?


Expected result

At 991,890, unexpected result

I gonna add: This happened in the current version: Version 8.9.1 (20881) on BigSur 11.5, MacBookPro 16’ 2019, 2.6GHz, 16GB Ram

This is simply a tiny gap between the two breakpoints due to the values getting rounded by the browser. It is something that happens at that (less than) one-pixel location.

The breakpoint there is 61.9em – so if we do some math, and assume your base font size is still set to 16px, that would mean we’re looking at the breakpoint being at 990.4px and the next breakpoint up starts at 62em, or 992px. So there’s a small 0.6px break there that is getting rounded down by the browser (or Webkit in RapidWeaver’s Edit Mode).

This can be remedied with some work, and is on my todo list already, but as it happens only when adjusting the browser manually at this sliver of a breakpoint it hasn’t been on the high priority list.

Thank you so much for getting back.
Yes, i did not change the default values in any way: HelveticaNeue, 16px.
When i use NavBarPro, the navigation disappears completely at 991x890.
Is there anything i can do from my side ?

Bigger or smaller than 991x890

at 991x890

Quite honestly I wouldn’t worry about it all that much. Your visitors are not going to be sliding the browser window in and out, and in and out, and in and out like you or I are when we’re testing sites. They’re just not going to land on right on that 991px spot.

No, it has to be updated throughout all of the stacks internally. As I said it is on my list to update it to better work with the default base font sizing.

That said even if I update it you’re going to end up with a situation where if the base font changes to another value, instead of the default 16px, you’ll have the possibility of having a gap elsewhere. It is just the downside of browsers rounding values as they see fit.

The chances of your visitors running up against this 1px gap is pretty narrow, pun intended.

1 Like