Joomshaper Investa Off Canvas On Menu Overflow (Screen Resize Or IPad)
Riesjard
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; }
Riesjard
Accepted AnswerAdding code below to CSS seems to work
@media screen and (max-width: 1280px) { .sp-megamenu-parent {display: none !important;}
offcanvas-toggler {display: flex !important;}
}
.burger-icon { width: 35px; } .burger-icon > span {height: 4px; }
offcanvas-toggler::after {
content: "MENU"; padding-left: 10px; color: #FFF; margin-top: -3px;}
Rashida Rahman
Accepted AnswerHi there!
Thanks for reaching out and sorry for your experience.
Kindly check and follow the below tips to see if it helps:
Best regards,