Menu disappears in mobile view

Bug description

When viewing the website on a mobile device such as a phone (smaller resolution) the menu dissapears.

When using the developer tools in Chrome, it seems that the element to expand the menu is there but there is no glyph to show that there is a menu. In addition when clicking the element the menu does not push content down, instead the area becomes scrollable and a sidebar appears if the cursor is in the menu and you scroll with the middle mouse button.

Reproduction steps

1. Open the portal in Google Chrome
2. Open the devtools - F12
3. Press the ‘Toggle Device toolbar’ button - Ctrl+Shift+M
4. Any resolution below 600px by (n) works.

Expected behavior

Obvious button to expand menu is visible. Menu is visible when expanded.

Is your portal managed or self-hosted?

Managed and Self-hosted

Release tag or commit SHA (if using self-hosted version)

Latest version

Environment

• Operating system: [Android, iOS]
• Browser: [Google Chrome] - others not tested
• Version: [latest]

Additional context

Changing the size of the logo or removing it completely does not affect the behaviour of the bug.

In DevTools look for

<button class="collapsible-toggle hamburger" aria-label="Toggle" data-toggle="collapsible">
        <i class="icon icon-menu-8"></i>
</button>

[azaslonov]

Fixed in #415. However, there is still a lack of customization control for the “hamburger” button (e.g. you can’t change its color). That will be fixed soon as well.

[azaslonov]

Hi @ArkimeraMattias, yes, there is some progress. In the next release, we’re shipping a concept of Popups, which brings much more flexible options for addressing scenarios like mobile menus (and many others). You’ll be able to customize a popup as you need (position, alignment, padding, background, borders, backdrop, etc.) and assign it to any linkable trigger (button, menu item, etc.).

The popups and visibility (on different form factors) option will eventually replace the “collapsible panel” widget (which is obviously hard to configure). So, using this approach (plus Menu snippets and docs), you’ll be able to customize the “hamburger” button itself (which is just a regular Button with a popup attached) and how your menu appears on mobile (which is a regular Menu widget placed on the popup).