Replace Off Canvas Menu With Desktop Menu In Mobile/tablet View
Walter
A client wants the OffCanvas menu (the 3 lines or harmburger menu) to be replaced with desktop menu when viewing the website in mobile / tablet mode. He simply wants the same menu displayed in desktop mode to appear in mobile/tablet mode. How can i do that? I am using JS politicas template.
Walter
Paul Frankowski
Accepted AnswerYes, it's possible, but request using serveral lines of custom CSS. Start from this:
#sp-menu {display: block !important; background:#0A700A;}
#sp-menu .sp-megamenu-parent
{ display: block !important;}
@media (max-width: 990px) {
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
display: inline-block;
padding: 0 12px;
line-height: 26px;}
body.ltr #offcanvas-toggler.offcanvas-toggler-left {
display: none !important;}
}
Ariba
Accepted AnswerHello
Thank you for your query. Can you provide the site URL please, if possible?
Paul Frankowski
Accepted Answerand if you don't use logo for mobile view - just hide that column from template options - Layout - "Logo" column options.
Walter
Accepted Answer@ Paul Frankowski The custom CSS worked and thanks a lot on that. As you indicated in the second post to hide the "Logo" column option, I think I have to disable the mobile view logo so I get only the menu item displayed well. But I am unable to find logo column option in the JS Politicas template. When I got template options - Layout Builder (has Layout Builder in this case instead of just Layout), nothing is there. When can I find it.
Ariba
Accepted AnswerHello
Use the following code in custom css section to hide the logo
@media (max-width: 991px) {
#sp-logo {
display: none; !important;
}
}Paul Frankowski
Accepted AnswerI forgot that some templates has built-in/preset header, and in theory you could rebuild header with custom one.... ...anyway solution delivered by @Ariba - should help you by now.
You're welcome.