Menu dropdown opens outside the screen on small screens

[ikrogh]

Hi, the menu dropdown opens in left. That is a problem on small screens (iPad), where it opens outside the screen.
Where can I mark, that the dropdown should open in right? Or can I make a burger-menu, when the screensize is iPad?

[rad]

Hi @ikrogh,

Thanks for reaching out.

Would you mind providing a screenshot of what you’re getting? I checked your site on iPad and the sub-menu
is aligned and appears from the right.

This behavior is automatic and part of theme features to prevent sub-menu from going outside the active viewport.

And on a smaller view of the iPad, it’s appearing as a burger mobile menu and no issue with dropdowns appearing outside the screen.

And yes, you can make the burger-menu appear earlier, but since iPad has the same screen resolution as desktop, the burger menu may as well appear on desktop and laptop of similar screen size. Please add this CSS to Theme Options > CSS to achieve that.

@media ( max-width: 1366px ) {
.x-nav-wrap.desktop {
    display: none !important;
}
.x-nav-wrap.mobile:not(.x-collapsed) {
    display: block !important;
}
.masthead-inline .x-btn-navbar {
    display: block !important;
    float: right !important;
}
}

Please note that we don’t maintain or support any given custom code, it’s should be user responsibility to implement it and it should only serve as a guide.

Thanks!