Navigation menu is misaligned in the mobile browser

[s3689]

What happened?

The layout parameter in params.toml is set to hybrid, the navigation menu is misaligned in the mobile browser,

However, there is no problem in the "development tools" mode of the desktop browser, thanks.

Theme version

v2.4.2

Hugo version

v0.107.0

What browsers are you seeing the problem on?

Chrome, Safari

Relevant Hugo log output

No response

[github-actions]

This issue has been automatically marked as stale because it has not had any recent activity.
If you are still experiencing this issue, please review the issue history and add a reply with any requested and/or additional information in order to keep the issue open.
This issue will automactically close in 14 days if no further activity occurs.

[AntoineSoetewey]

I believe this issue shouldn't be marked as stale as it is still present.

[Nicceboy]

The problem seems to be indeed related to specific browsers.
Even thought Firefox on iOS uses Safari for rendering, it works fine. But not in the Safari itself.

Edit: Might be related to changed height, caused bottom navigation on iOS safari (where url is located, for example). Navigation seems to fix itself if you scroll down, and Safari hides the bottom bar.

[jpanther]

Thanks for the report. Apologies for my delayed response, I've been super busy! The alignment of things like this is a constant battle because of the way Safari calculates the viewport size and as @Nicceboy suggests, it is probably due to the bottom navigation. I'll have a look into it when I have a moment and see if I can track it down.

[leonidboykov]

Same issue with Chrome on Android.