Dear Joomshaper,

on resizing screen or opening website on Ipad, the mega menu is placed under the black topbar where menu is showed normally and not switched to off canvas menu.

In the past already got some custom CSS script from you.

How can we have menu changed to off canvas menu when scree is not wide enough to show mega menu

.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span {
display: inline-block;
padding: 0 15px;
line-height: 90px;
margin: 0;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) {
font-size: 14px;
line-height: 1;
display: inline-block;
padding: 8px 0;
cursor: pointer;
font-weight: bold;
}