0

On the Magento/Blank theme and themes inheriting from Magento/Blank the mobile menu is expanding too far off the screen when active.

The nav element .nav section has a width that is calculated as such:

width: calc(100% - 54px)

However the calculated width is near double the width of the html itself. This behavior is also only seen when viewed via responsive emulation (Chrome device mode for example) or on a mobile device. Simply reducing the size of the window will give a proper width.

Has anyone else ran into this same issue? Using the Magento/Luma theme does not have this issue. I cannot provide a url for the site as it is local to my machine and I was unable to find an M2 demo on the internet that is not using Magento/Luma.

Menu in device Mode:

Menu in Device Mode

Menu with reduced window size

Menu with reduced window size

0

I also came across this issue.

I opted to overwrite the _navigation.less file in the ./web/css/source/ directory of my theme. Do this by copying and paste the corresponding file from the Blank theme.

Search for the following selector:

.nav-sections {
        .lib-css(transition, left .3s, 1);
        height: 100%;
        left: -80%;
        left: calc(~"-1 * (100% - @{active-nav-indent})");
        overflow: auto;
        position: fixed;
        top: 0;
        width: 80%;
        width: calc(~"100% - @{active-nav-indent}");

        .switcher {
            border-top: 1px solid @color-gray82; ...

Within the "left" & "width" properties, I replaced the value 100% with 100vw. You'd think they'd be the same value since 100% should be 100% of the viewport, but it seemed to address the issue. Not sure why.

The resulting selector should like like this, note the replaced 100% values:

.nav-sections {
        .lib-css(transition, left .3s, 1);
        height: 100%;
        left: -80%;
        left: calc(~"-1 * (100vw - @{active-nav-indent})");
        overflow: auto;
        position: fixed;
        top: 0;
        width: 80%;
        width: calc(~"100vw - @{active-nav-indent}");

Let me know if this works for you. Maybe someone can explain the behavioral difference between 100% and 100vw here. To me it shouldn't make a difference.

  • Works as expected now. Still doing some testing to see if there are any non-obvious side-effects. I posed this same question on the Magento 2 forums -- did not pick up any traction. Thank you. – jumpincrackbass Apr 7 '16 at 19:17
0

A bit late maybe, but this might help someone else.

I solved this issue adding:

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>.

in default_head_blocks.xml located in:

 [your_magento_root_folder]/vendor/magento/module-theme/view/frontend/layout

Hope it helps.

  • This solves the issue with the menu, however it disables the ability for a user to zoom on a touch device and can lead to poor usability. – jumpincrackbass Jun 10 '16 at 15:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.