The menu is not rendered properly at exactly 999px

[pmilosev]

At 1000px and above the desktop menu is rendered properly.
At 998px and below the mobile menu (behind hamburger button) is rendered properly.
At exactly 999px the main menu is hidden (as it should), the hamburger button is shown (as it should), but portions of the mobile menu is displayed in the center of the header.

At first I thought it's only one issue with showing / hiding the menu, but looking at it again it seems there are multiple issues, as the menu layout is also not correct. Here is how the mobile menu looks like when it is correctly rendered at 998px:

[cjyabraham]

I can't seem to reproduce what you are experiencing. This is what I see at 999px. What browser are you using?

[pmilosev]

Can this be device related instead of a browser related issue ?
I can reproduce the issue on all of the following browsers:

• LibreWolf 146.0.1-1
• Mozilla Firefox 146.0.1
• Ungoogled-Chromium 143.0.7499.169
• Google Chrome 143.0.7499.169

All of the above running on a Linux / Wayland / KDE laptop.
Prompted by your reply I tested on a MacBook, and indeed the issue is not reproducible in neither Chrome nor Firefox.

I was a bit bothered by the issue and was going to spend some time on it after I finish some other adjustments I do on the theme, but if this is not only dimension specific, but also device specific, then its even less important than before :).

[pmilosev]

I just noticed this, but as suspected this is some rounding issue.
When the device width is set to 999, the actual content is shown to be 999.333px wide.

My guess is that:

• Most SCSS defaults to mobile and has @media (min-width: variables.$min-desktop) blocks to manage desktop styles.
• Some menu related logic is then not defaulting to mobile, but uses $mobile-max to trigger some logic
• Since the resolution is 999.333 this is actually above mobile-max and does not get executed (and below min-desktop to get everything set to desktop style).

[pmilosev]

Setting $mobile-max: 999.999px does the trick, but I recommand reworking the SCSS according to:
https://stackoverflow.com/questions/13241531/what-are-the-rules-for-css-media-query-overlap

Going through the code I could see some @media conditions using hardcoded numbers like 500 and 1000 which oddly enough seem like half and exactly the min-desktop value, so some overall cleanup would be beneficial.