Menu sidebar for new theme

Our previous efforts converted the horizontal menu into a sidebar ( 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.

Hi Brad,

I found another good way of doing this and is just to simply use the mobile menu called based on screen size. Have you explored doing this at all? I did put a post about this.

By putting! !important rules on selectors for the already created by knack mobile menus this overrules the @media screen size rules. Might be worth checking it out.