Antimatter: The burger menu is late appearing when shrinking the page size

Hi,

I have quite a few menu headings that stretch across the top of the page.

When I reduce the page size, the normal menu doesn't reduce to a burger menu soon enough - the whole of the normal menu drops below the heading (still floating to the right).

When reduced even further, the burger menu does appear and the normal menu disappears.

How can I make it that the normal menu disappears as soon as the left most item in the normal menu bumps into the logo/site title?

Many thanks in advance,

Luke

You just need to tweak the mediaquery breakpoints in the scss and recompile the scss with a sass compiler. More info in the docs.

Thanks for the pointer - I'll dig around over there. Cheers.

Hi I have the same problem
would you please explain more?

I think this is a non-issue. Developers test their work at multiple sizes by resizing their desktop window, but why would a real user resize their desktop screen to mobile size? Mobile users will see the hamburger immediately because that is the size they load the page at.

The issue you are seeing is caused by the browser having to re-render the page styling for all the various breakpoints you are hitting. Sometimes it bogs down. If you have a lot of style definitions (which you often will with responsive design) and if you have generic definitions (wildcards and regexes) then the browser has a lot of work to do.

The solution is to test mobile sizes on mobile devices.

One thing to take heed of though, is landscape-portrait-flipping, which happens annoyingly often. In this case the page will redraw. As Rhukster said, you want to make sure that you either eliminate the breakpoint range that causes the floating menu header, or change it to the desired behavior.

In most cases of responsive design, the breakpoints are not static but overlapping ranges. Thus if you remove, say, everything between small phones and extra large desktops, the page will only render in the former if it is a mobile-up design (the breakpoint takes presedence over all other considerations until a different breakpoint matches).

A good example of improper use of these ranges, or they may in fact be static, are some of the modern WordPress sites that feature a static navbar that reduces to hamburger menu. There is a good portion of resolutions in which the same behavior as you describe occurs: Menu floats and crashes with content, where it would be expected to reduce to the menu-icon.

Thus, consider which breakpoint-ranges are defined and how they operate. Chrome's developer console in mobile-mode shows the various ranges, which should give a good indication.