# Make menu into left sidebar
**URL:** https://forums.knack.com/t/make-menu-into-left-sidebar/10216
**Category:** Show & Tell
**Created:** [November 22, 2015, 4:38am UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216 "2015-11-22T04:38:57Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@BradStevens](https://forums.knack.com/u/BradStevens)
#### Post date: [November 22, 2015, 4:38am UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/1 "2015-11-22T04:38:57Z")
This is handy if you have lots of menu items and want the classic left sidebar menu type layout. This isn't perfect by any means but works great when accessing your Knack app directly.
**JavaScript**
```
$(document).on('knack-page-render.any', function(event, page) {
//Make the scene height = menu set in CSS
$(".kn-scene").height($("#kn-app-menu").height());
});
```
**CSS**
```
/* Doc setup */
html {height: 100%}
body {height: 100%}
#knack-dist\_1{height: 100%; padding: 0 0 0 0; }
/\* Sidebar \*/
#kn-app-menu {float: left; width: 180px; height: calc(100% - 60px); background-color: **ChangeThis** ;}
#kn-app-menu \> ul \> li \> a {padding: 0 0 0 5px !Important; width: 175px;}
.kn-scene {float: left; width: calc(100% - 180px); overflow-y: scroll;}
```
Change the app-menu background color to the color set in app settings \> Layout & Colors \> Tab Menu.
Customise the width of the sidebar by changing the 180px figure.
**Current Problems**
So far the print link of any page will also scale the scene as on the screen in any print output and I’m sure there’s a fix for that. The left sidebar height is set as the screen height minus 60px which is the top panel height, that might change if you use a custom logo and I’m sure a complete JavaScript solution would cover that issue.
Enjoy!
---
### Author:  [@BobLove38845](https://forums.knack.com/u/BobLove38845)
#### Post date: [March 21, 2021, 7:17pm UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/2 "2021-03-21T19:17:05Z")
Is there anyway to have a menu float at the bottom of the page for mobile users like you see in some mobile apps?
---
### Author:  [@Saint-Criq24842](https://forums.knack.com/u/Saint-Criq24842)
#### Post date: [November 13, 2018, 10:54am UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/3 "2018-11-13T10:54:14Z")
thanks marc
Jonathan work is really good, but the code in his community post do not work... And it s still too tricky for me right now (need to improve my CSS skills :D)
so i like the Brad approach wich is quite easily understandable.
i would like to go first on that... and try to make my lists expanded...
i guest i need to set all ul and li menu items with display:block property and went for
.app-menu-list-mobile {display:block !Important;}
.kn-dropdown-menu {display:block !Important;}
.kn-dropdown-menu-list {display:block !Important;}
but items are still one over the other... what do i miss please :)
---
### Author:  [@MarcBonger59321](https://forums.knack.com/u/MarcBonger59321)
#### Post date: [November 12, 2018, 10:01am UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/4 "2018-11-12T10:01:33Z")
Hi Saint-Criq,
Have a look at the following post
[https://support.knack.com/hc/en-us/community/posts/360022175651-Customised-Side-nav-menu-at-all-widths-instead-of-the-hamburger-top-menu-Just-a-bit-more-modern](https://support.knack.com/hc/en-us/community/posts/360022175651-Customised-Side-nav-menu-at-all-widths-instead-of-the-hamburger-top-menu-Just-a-bit-more-modern)
Might be helpful.
---
### Author:  [@Saint-Criq24842](https://forums.knack.com/u/Saint-Criq24842)
#### Post date: [November 12, 2018, 9:54am UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/5 "2018-11-12T09:54:39Z")
hi there
first thanks for sharing that improvment.
I would like to use that side menu, but i am also using dropdown menus, and would like dropdown items to be always visible, not only after clicking the subitem...
any ideas on how to make side menu always fully expanded?
---
### Author:  [@BradStevens](https://forums.knack.com/u/BradStevens)
#### Post date: [October 7, 2018, 12:39am UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/6 "2018-10-07T00:39:28Z")
A different approach here to make this work in the new theme - this simply forces the mobile menu to be 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-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:
---
### Author:  [@Marc97063](https://forums.knack.com/u/Marc97063)
#### Post date: [August 18, 2017, 1:40pm UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/7 "2017-08-18T13:40:08Z")
Thanks Brad,
I'll have a go with the div ids and the inspector...
Marc
---
### Author:  [@BradStevens](https://forums.knack.com/u/BradStevens)
#### Post date: [August 14, 2017, 10:40pm UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/8 "2017-08-14T22:40:04Z")
Hi Marc, thanks for the feedback - the more we share the better Knack gets!
The script will need targeting the beta theme div ids to make it work - I'm short of time just now but I'm confident all it will take is some Chrome inspector time and testing to find the ids and modify the script.
Brad
---
### Author:  [@Marc97063](https://forums.knack.com/u/Marc97063)
#### Post date: [August 14, 2017, 9:16am UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/9 "2017-08-14T09:16:30Z")
Hi Brad,
Thanks for sharing this great script.
It works like a charm with the 'old' theme designs, but I'm unable to get work with the new beta theme.
Any thought on how the fix this problem?
Thanks,
Marc
---
### Author:  [@BradStevens](https://forums.knack.com/u/BradStevens)
#### Post date: [November 19, 2016, 3:14am UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/10 "2016-11-19T03:14:17Z")
Keith - I've been meaning to thank you for ages!
Thanks!
Brad
---
### Author:  [@KeithSterl25609](https://forums.knack.com/u/KeithSterl25609)
#### Post date: [September 28, 2016, 6:15am UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/11 "2016-09-28T06:15:57Z")
One more thing to make this work with popups...you have the change the code to this...
```
$(document).on('knack-page-render.any', function(event, page) {
//Make the scene height = menu set in CSS
$(‘div.kn-scenes \> div.kn-scene’).height($("#kn-app-menu").height());
});
```
---
### Author:  [@KeithSterl25609](https://forums.knack.com/u/KeithSterl25609)
#### Post date: [September 28, 2016, 5:34am UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/12 "2016-09-28T05:34:24Z")
Actually, the above leaves a vertical scroll bar that's not supposed to be there. This is better...
```
.kn-page-modal > .kn-scene {float: initial; width: initial; overflow-y: hidden;}
```
---
### Author:  [@KeithSterl25609](https://forums.knack.com/u/KeithSterl25609)
#### Post date: [September 28, 2016, 5:25am UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/13 "2016-09-28T05:25:03Z")
This breaks the a modal pop-up form, but I figured out you can fix it by adding this line to the end of the CSS...
```
.kn-modal-wrapper.kn-page-modal > .kn-scene {float: initial; width: initial; overflow-y: initial;}
```
---
### Author:  [@BradStevens](https://forums.knack.com/u/BradStevens)
#### Post date: [March 29, 2016, 11:56pm UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/14 "2016-03-29T23:56:44Z")
Sorry Graham I haven't explored doing this for a menu set. I've you have a go and get something working please post in a separate topic!
---
### Author:  [@GrahamPell32054](https://forums.knack.com/u/GrahamPell32054)
#### Post date: [March 29, 2016, 4:03am UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/15 "2016-03-29T04:03:26Z")
This is great for the changing the main top menu to the side in the app. Can you tell me how I would keep the top menu horizontal, and only change the TAB MENUS into vertical layout instead? I'm not great at the coding side, so any help is appreciated.
---
### Author:  [@BradStevens](https://forums.knack.com/u/BradStevens)
#### Post date: [February 5, 2016, 10:08pm UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/16 "2016-02-05T22:08:48Z")
Thanks for the input Jeff - we settled on "@media screen and (min-width: 500px)" in our environment that seems to work well.
---
### Author:  [@JoshCamero54273](https://forums.knack.com/u/JoshCamero54273)
#### Post date: [February 5, 2016, 6:34pm UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/17 "2016-02-05T18:34:57Z")
Worked perfectly! Thanks Jeff!
---
### Author:  [@JeffZearfo11770](https://forums.knack.com/u/JeffZearfo11770)
#### Post date: [February 5, 2016, 6:29pm UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/18 "2016-02-05T18:29:47Z")
Sorry for not providing more clarity. Try putting all of the existing css that you used to move the menu to the side within the brackets. Basically, this will make it only follow those css rules if the min width is at least 480. If it's on a smaller screen, it will ignore the rules, and follow the default layout that knack has set up for smaller screens. Try tweaking the 480 number if necessary to ensure it works the way you want on each screen.
---
### Author:  [@JoshCamero54273](https://forums.knack.com/u/JoshCamero54273)
#### Post date: [February 5, 2016, 6:26pm UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/19 "2016-02-05T18:26:56Z")
I've googled the css media queries, but I am a little bit confused about how to set up in the CSS. Does anything need to go in between the { }?
---
### Author:  [@JeffZearfo11770](https://forums.knack.com/u/JeffZearfo11770)
#### Post date: [February 5, 2016, 5:58pm UTC](https://forums.knack.com/t/make-menu-into-left-sidebar/10216/20 "2016-02-05T17:58:38Z")
@media queries should be able to help here as well. Give something like this a shot:
```
@media screen and (min-width: 480px) {
}
```
Googling css media queries should help provide some more guidance for you, or post back here and we can try to help you through the process.
[Next page](https://forums.knack.com/t/make-menu-into-left-sidebar/10216.md?page=2)