Mobile menu overflowing in Safari

  • Hi,
    I have faced with an issue about mobile menu in Safari web browser. It seems the browser interprets CSS differently from the others, like Chrome or IE.

    The problem is that mobile menu in Safari is overflow from the header. The header does not expand according to the mobile menu when clicked to open.

    Despite this, one curious thing is the header still expands normally when clicked for submenu. Once opening any submenu, it imdediately expands it DIV until the last showing submenu.

    I will very appreciate if you can help to find any solution to fix this overflowing menu in Safari.

    https://www.ads-software.com/plugins/megamenu/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi,

    Please post a link to your site so I can take a look.

    Regards,
    Tom

    Thread Starter narttawat

    (@narttawat)

    Sorry, I forgot to post it. Please visit my site https://www.udrpress.com

    The issue element is the main menu at the bottom of header. Kindly adjust your window size as mobile.

    Thanks in advance,

    Thread Starter narttawat

    (@narttawat)

    Despite this, one curious thing is the header still expands normally when clicked for submenu. Once opening any submenu, it imdediately expands it DIV until the last showing submenu.

    According to my quote, this is not reliable. It seems to depend on Safari version or Apple’s device.

    Plugin Author megamenu

    (@megamenu)

    Hi narttawat,

    I can’t see how to fix it.

    What changes have you made to the theme? Are you able to test on a clean copy of StoreFront and compare the changes? I’m not seeing the same problem at https://storefront.maxmegamenu.com

    Regards,
    Tom

    Thread Starter narttawat

    (@narttawat)

    I have solved the problem by direct assigning handheld menu.

    As default, the primary menu would be hidden in smart phone screen. By no mean, the primary menu affected by “Max Mega Menu” still responsively shows on that mode. So, I disabled handheld menu and used only responsive primary menu for both screen modes.

    Because of that, primary menu in smart phone screen is supposed to be hidden. The header therefore performs as no area of primary menu which causes text overflowing effect.

    Assigning/enabling a handheld menu totally fixes the issue.

    Plugin Author megamenu

    (@megamenu)

    Hi narttawat,

    Glad to hear you got it sorted.

    I dealt with a similar problem yesterday (also in Safari), it was due to a height being set on the header element. So maybe that will help you or someone who finds this thread on google.

    Regards,
    Tom

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Mobile menu overflowing in Safari’ is closed to new replies.