Hamburger icon for smaller screen resolutions not working as intended

[ZarTrox]

Bug description

In the DevPortal we are using multiple menu items which are stored in collapsible panels so that when users with smaller screen sizes, e.g. a smartphone, are using this Portal can navigate through the DevPortal with the hamburger Icon. But when the hamburger icon appears, the Menu is just moved to a different location and does not disappear. See first image.

Upon clicking on the hamburger icon the menu is correctly displayed. See second image.

Our observation is that the menu which first didn't disappear changes position and is displayed correctly. We are aware that the new grid approach is in development but since it may take some time until it is finished a solution/workaround for this old problem in the meantime should be present.

Expected behavior

For smaller screenresolutions the hamburger icon should appear and the menu widget should completely disappear. When clicking on the hamburger icon the menu widget should be displayed correctly and readable.

Is your portal managed or self-hosted?

Managed

[msftbot[bot]]

@ZarTrox, thank you for opening this issue. We will triage it within the next few business days.

[msftbot[bot]]

@ZarTrox, thank you for reporting the bug.

[azaslonov]

UPDATE: This issue has been addressed in Paperbits libraries and will be integrated in next 3-4 weeks along with site heading snippet. This includes full hamburger button customizations, popup container controls, and more.