Bug in Mobile Layout – Navigation Menu Behavior*

[Jiwoon-Kim]

When scrolling the page so that only part of the header is visible and then tapping the main navigation menu, the menu appears below the admin toolbar instead of aligned with the header.

If the user then taps an empty area on the screen, the main header begins to behave like a sticky header on mobile.

At this point, if the user opens the toggle menu from the now-"sticky" header, the menu appears detached from the header, resulting in a broken layout.

Issue 1: Sticky Header Behavior After Toolbar Click

Steps to reproduce:

1. On the mobile layout, click the main menu toggle button.
2. Then tap the profile toolbar.

Bug behavior:

• The main header begins to behave like a sticky header, remaining fixed at the top of the viewport.
• The subheader shifts upward to occupy the original space of the main header.

📝 This behavior does not appear to be intended and may be triggered by layout reflows or class toggling after the toolbar interaction.

---

Issue 2: Menu Detaches from Subheader on Scroll

Steps to reproduce:

1. Scroll down the page in mobile view.
2. Click the subheader’s menu toggle.

Bug behavior:

• The expanded subheader menu appears visually detached from the subheader.

---

Issue 3: Combined Layout Shift and Detached Menu

Steps to reproduce:

1. Trigger the bug from Issue 1 (main header becomes sticky, subheader shifts).
2. Expand the main header’s menu using its toggle.
3. Expand the subheader’s menu using its toggle.
4. Collapse the main header’s menu.

Bug behavior:

• The subheader menu remains open while the main header menu is collapsed.
• At this point, the subheader menu scrolls independently from its parent header, appearing detached from the layout.
• The header-menu structure becomes fragmented and causes user confusion.

📝 This compound issue likely arises due to improper DOM hierarchy or inconsistent positioning logic when both headers and menus are simultaneously active.

[Jiwoon-Kim]

While this might not occur under typical usage scenarios, the issue becomes more complex when using the responsive layout on desktop.
For example, toggling between different viewports or resizing the window manually can trigger unexpected behavior similar to the mobile sticky header bug, especially when header elements shift positions or overlap due to layout recalculations.

Rather than simply being a flaw to correct, this behavior might be repurposed as a feature in certain design scenarios — for instance, when implementing a persistent side header or a hybrid navigation layout that adapts dynamically to scrolling and toggling actions.

[ryelle]

Thanks for the report. All three issues seem to be due to the navigation closing but not fully "cleaning up". The has-global-modal-open class is still on the body, when it should be removed when clicking the close button. The same issue happens if you open the global nav and then close it with the escape key.

I'm attaching your video, since it was easier to understand the problem from this.

Screen_Recording_20250406_224323_Edge.mp4