Our previous efforts converted the horizontal menu into a sidebar (https://support.knack.com/hc/en-us/community/posts/220702748-Make-menu-into-left-sidebar?input_string=Menu%20sidebar%20for%20new%20theme) but a different approach is to make the mobile menu displayed permanently at widths > 768px, and happily doesn't require javascript at all.
Other things this does:
- Sets the sidebar below the app title.
- Hides the mobile account settings (.kn-mobile-account-container) - they remain in under the app title bar.
- Sets the scene to scroll vertically so the app menu and sidebar stay locked.
- Hides the usual horizontal menu (#kn-app-menu).
- Allows the usual mobile menu to work for widths < 769px.
@media screen and (min-width: 768px) {
html, #knack-body {overflow-y:hidden !Important;}
#knack-logo {padding: 0.5em 0;}
#kn-mobile-menu {left: 0; top: 60px; width:150px; font-size:inherit; background-color:#ebebeb; box-shadow: inherit;}
.kn-info-bar {left:150px; width:calc(100% - 150px); position: relative;}
.kn-scenes {left:150px; width:calc(100% - 150px); position: relative; height:calc(100vh - 60px - 40px); overflow-y: scroll;}
.kn-mobile-account-container {display:none !Important;}
#kn-app-menu {display:none !Important;}
}
I haven't fully tested across the whole app yet (popup forms and print screens for example...).
Here's the CRM template:
Share your feedback and modifications here!
UPDATE: Discovered the crumbtrail was partially hidden under the sidebar, added the .kn-info-bar style fix.